Flutter: 3 minutes to teach you to build a beautiful UI interface

Summary

This article uses a simple example to gradually introduce how to build a beautiful layout in Flutter. Through this article, you will learn the following points:

  • How Flutter's layout mechanism works
  • How to lay out widgets vertically and horizontally
  • How to layout Widget s in Flutter

This document mainly introduces how to make layouts in Flutter, and you will eventually build a page like the following:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

This article will take you step by step to build a page like the one above.

Step 0: Create a Flutter project

  1. Create a Flutter project
  2. Set the project's app bar title and app title as follows:

 Widget build(BuildContext context) { 
 return MaterialApp(
 title: 'Flutter layout demo',
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Center(
 child: Text('Hello World'),
 ),
 ));
 }

After the setting is complete, the running effect is as shown in the figure below:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

Step 1: Analyze the layout logic of the page

The first step is to decompose the entire page layout into basic elements, mainly starting from the following points

  • Identify rows (Row) and columns (Column)
  • Is there a grid in the layout?
  • Is there an overlap between Widget s?
  • Does the entire UI layout need a tab bar?
  • Focus on areas that need alignment, padding, and border s

So let's take a look at the main components of the entire page:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

It can be seen that the main components of the entire page are the 4 parts marked by the red box. These 4 parts are located in the same column (Column), which are: 1 Image, 2 Row, and 1 Text.

Let's analyze each row (Row) in depth:

  • Row 1, which is the Title section, has 3 columns: 1 column (Column) consisting of 2 lines of text, 1 star Icon, and 1 number:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

It can be seen that since the first column (Column) occupies most of the space of the entire row, it should be wrapped by the Expanded Widget.

  • The second row, which is the button section, also contains 3 sub-elements, each sub-element is a row, and the contents of the row are an icon and a text:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

  • The third line: the third line does not have a very complicated composition, it is a simple text block.

After the above analysis, we decompose a complex page into multiple simple components, which can simplify the implementation of the entire page. In order to avoid the confusion of the layout code, we should use variables and functions to build sub-sections of the layout. This I'll demonstrate it in the code below.

Step 2: Implement the first row (title Row)

Give the code directly, and the specific explanation is in the comments of the code. Please pay attention to the comments:

Widget titleSection = Container(
 //Set a padding of 32px for all directions of the entire Widget (ie this row)
 padding: const EdgeInsets.all(32),
 child: Row(
 children: [
 Expanded(
 /**
 Place the Column in Expanded, since Expanded will occupy all the free space available in the current Row by default, so the Column will naturally be stretched to occupy all the free space available in the current Row.
 */
 child: Column(
 /**Set the crossAxisAlignment property of Column to CrossAxisAlignment.start to ensure that the elements in this column (that is, the Widget in the children property) are arranged horizontally at the starting position of the current Column
 */
 crossAxisAlignment: CrossAxisAlignment.start,
 children: [
 /**
 The purpose of putting this Text in the Container is to add padding through the Container
 */
 Container(
 padding: const EdgeInsets.only(bottom: 8),
 child: Text(
 'Oeschinen Lake Campground',
 style: TextStyle(
 fontWeight: FontWeight.bold,
 ),
 ),
 ),
 Text(
 'Kandersteg, Switzerland',
 style: TextStyle(
 color: Colors.grey[500],
 ),
 ),
 ],
 ),
 ),
 /**
 The last two elements are 1 Icon and 1 Text, which are used to display stars and numbers respectively
 */
 Icon(
 Icons.star,
 color: Colors.red[500],
 ),
 Text('41'),
 ],
 ),
);

Simply put the above variable titleSection in the app body:

@override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Column(
 children: <Widget>[titleSection],
 )));
 }

Note that the purpose of simplifying the layout code is achieved by using the variable titleSection here, so that the code in MaterialApp(..) will not be too long and too confusing.

The effect of running is shown in the figure below:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

Step 3: Implement the button row

The button row (button section) has 3 columns, and each column is composed of the same layout: 1 Icon, 1 Text. The columns in this row are evenly spaced, and since the code to build each column is almost the same, create a private method called buildbuttoncolumn() that takes a Color parameter, an Icon parameter and 1 text (Text) parameter, and returns a column (Column) with the Widget drawn in the given color, the code is as follows:

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 // ···
 }
 Column _buildButtonColumn(Color color, IconData icon, String label) {
 return Column(
 mainAxisSize: MainAxisSize.min,
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Icon(icon, color: color),
 Container(
 margin: const EdgeInsets.only(top: 8),
 child: Text(
 label,
 style: TextStyle(
 fontSize: 12,
 fontWeight: FontWeight.w400,
 color: color,
 ),
 ),
 ),
 ],
 );
 }
}

The _buildButtonColumn() method adds the Icon directly to the Column, and the Text is first wrapped with the Container, and then the Container is added to the Column. The purpose of this is to use the Container to set the top padding for the Text, so that it will not Text and Icon are too close together.

After completing the _buildButtonColumn() function, we only need to call this function when we need to build a column (Column) and pass in the corresponding 3 parameters to build the column we need:

Color color = Theme.of(context).primaryColor;
Widget buttonSection = Container(
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
 _buildButtonColumn(color, Icons.call, 'CALL'),
 _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
 _buildButtonColumn(color, Icons.share, 'SHARE'),
 ],
 ),
);

Note that the mainAxisAlignment property value of the Row is set to MainAxisAlignment.spaceEvenly here, so that the columns in the Row evenly occupy the available space of the entire row.

Then put the variable buttonSection in the app body:

 return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Column(
 children: <Widget>[titleSection, buttonSection],
 )));

The running effect diagram is shown in the figure below:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

Step 4: Implement the Text section

Define the Text part as a variable, then place the Text in a Container, and set the padding property for the Container:

Widget textSection = Container(
 padding: const EdgeInsets.all(32),
 child: Text(
 'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
 'Alps. Situated 1,578 meters above sea level, it is one of the '
 'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
 'half-hour walk through pastures and pine forest, leads you to the '
 'lake, which warms to 20 degrees Celsius in the summer. Activities '
 'enjoyed here include rowing, and riding the summer toboggan run.',
 softWrap: true,
 ),
);

Note that the value of the softwrap attribute is set to true here, which ensures that the text can wrap at the word boundary instead of wrapping in the middle of the word.

Then put the textSection variable above in the app body:

 return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Column(
 children: <Widget>[titleSection, buttonSection, textSection],
 )));

The running effect diagram is shown in the figure below:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

Step 5: Implement the Image section

So far we have completed 3 of the 4 lines, and only the image line has not been implemented. In this step, we will implement the display of the image:

  • Create an images folder under the top-level directory of the project
  • Place the image below under the images folder you just created and name it lake.jpg

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

  • Update the pubspec.yaml file, add the assets tag, and configure the image path, so that you can access the images you store in the code:

flutter: 
 uses-material-design: true 
 assets: 
 - images/lake.jpg

We can then refer to the graph in code:

return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Column(
 children: <Widget>[
 Image.asset(
 'images/lake.jpg',
 width: 600,
 height: 240,
 fit: BoxFit.cover,
 ),
 titleSection,
 buttonSection,
 textSection
 ],
 )));

The effect of running is as follows:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

Step 6: Another Attempt

Let's look at the final code after the previous steps are completed:

return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: Column(
 children: <Widget>[
 Image.asset(
 'images/lake.jpg',
 width: 600,
 height: 240,
 fit: BoxFit.cover,
 ),
 titleSection,
 buttonSection,
 textSection
 ],
 )));

Note that we set the property value of the body to Column, and then placed several sub-Widget s we implemented in Column. Now we change the way and use ListView to replace this Column:

return MaterialApp(
 title: 'Flutter layout demo',
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter layout demo'),
 ),
 body: ListView(
 children: [
 Image.asset(
 'images/lake.jpg',
 width: 600,
 height: 240,
 fit: BoxFit.cover,
 ),
 titleSection,
 buttonSection,
 textSection
 ],
 )));

The effect is as follows:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface

It can be seen that the static visual effect of using Column and ListView is the same, so should we use Column or ListView? Where is the difference between the two? The answer lies in "dynamic". The effects of the two are different under dynamic conditions. To be more specific, the Widget built using Column does not support scrolling, that is, it does not support scrolling events up and down or left and right, while using ListView will support Scroll events, like this:

A month to get you started with Flutter: UI (3) - 3 minutes to teach you to build a beautiful UI interface


Finally, I will share with you a mobile architecture outline, which includes all the technical systems that mobile architects need to master. You can compare your own deficiencies or deficiencies to learn and improve in a direction;

Those who need high-definition architecture diagrams and video materials in the diagrams can join my technical exchange group: 457848807 private chat group owner, Miss Sister, get it for free



Author: Advanced Android Development
Link: https://www.jianshu.com/p/8b91245732ed
Source: Jianshu
Copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source.

Tags: Android Flutter UI

Posted by web_noob on Thu, 22 Dec 2022 20:31:47 +0300