Building Beautiful UI Interfaces with Flutter-Basic Components
Published December 26, 2019In this post we are going to design the Simple Layout with Flutter-Basic Components
1.1 Preparation-Data Type
Based on the contents of the above card, we can define some fields. In order to standardize the development process, we first define a data type class for the card, so that the data can be better mocked and managed in the subsequent development process:
class BookViewModel { final String authorImgUrl; final String authorName; final String description; final String topic; final String publishTime; final String publishContent; final int replies; final int likes; final int shares; const BookViewModel({ |
1.2 Build the skeleton and split the layout
Based on above Figure, we can split the whole, is divided into a total of four parts: Cover, AuthorInfo, PublishContent and InteractionArea. To do this, we can build the basic skeleton of the code:
class BookView extends StatelessWidget { const BookView({ Widget renderCover() { Widget renderAuthorInfo() { Widget renderPublishContent() { Widget renderInteractionArea() { @override |
1.3 Cover area
In order to better highlight the effect of the picture, a mask layer is added here, so it can be used here Stack/ Positioned layout and LinearGradientgradient.
Widget renderCover() { |
1.4 Author Information Area
The Author information area is very suitable for layout using components Row and Column components.
Widget renderUserInfo() { |
1.5 Publishing Content Area
Through the UI exercises in this area, we can practice Container different component settings borderRadius and Text truncation processing when the component text content is exceeded. |
1.6 Interactive Area
In this module, we will use the Icon component, which can control its size and color and other attributes
Widget renderInteractionArea() { |
1.7 Summary
Through the above example, we successfully dismantled a seemingly complex UI interface step by step
Article Contributed By :
|
|
|
|
1062 Views |