What you'll learn
· How Flutter's layout mechanism works.
· How to lay out widgets vertically and horizontally.
· How to create a Flutter layout.
This blog introduces drawing the following layout:
step0: Create the basic code of the application
Make sure your Flutter environment is installed, then do the following:
1. Create a new Flutter application.
2. Replace the contents lib/main.dartwith the following code:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter layout demo',home: Scaffold(appBar: AppBar(title: const Text('Flutter layout demo'),),body: const Center(child: Text('Hello World'),),),);}
}
step1: Draw the layout diagram
The first step is to break down the layout into its basic elements:
- identify rows and columns
- Does the layout contain a grid?
- Are there overlapping elements?
- Does the UI need tabs?
- Note areas that need alignment, padding, or borders
First, identify the larger element. In this example, four elements are arranged in a column: an image, two lines, and a text block.
Next, plot each row. The first row is called the header section and has 3 subitems: a column of text, a star icon, and numbers. Its first child, column, contains 2 lines of text. The first column takes up a lot of space, so it has to be wrapped in an Expanded widget.
step2: Implement the title row
First, you'll build the left column in the header section. Add the following code at the top of the method MyAppof the class :build()lib/main.dart
Widget titleSection = Container(padding: const EdgeInsets.all(32),child: Row(children: [Expanded( /*1*/ child: Column( crossAxisAlignment: CrossAxisAlignment.start, children:[ /*2*/ Container( padding: const EdgeInsets.only(bottom: 8), child: const Text( 'Oeshinen Lake Campground', style: TextStyle( fontWeight: FontWeight.bold, ), ), ), Text( 'Kandersteg, Switzerland', style: TextStyle( color: Colors.grey[500], ), ), ], ),), /*3*/ Icon( Icons.star, color: Colors.red[500], ), const Text('41'),],),
);
/*1*/Placing a Column inside an Expanded widget stretches the column to use all remaining available space in the row. Set crossAxisAlignmentthe property to CrossAxisAlignment.startposition the column at the beginning of the row
/*2*/Placing the first line of text Containerin adds padding. ColumnThe second child in the , which is also text, is grayed out.
/*3*/The last two items in the header row are the star icon, set to red, and the text "41". Fits inside the container and fills it with 32px along each side. Add the header section to the application body as follows:
step3: Realize the button row
The buttons section contains 3 columns and they use the same layout - an icon above the row of text. Columns in this row are evenly spaced, and text and headings are drawn using primary colors.
Since the code to build each column is pretty much the same, create a buildButtonColumn()private helper method called , which takes a color, an icon, and text, and returns a column with its widgets painted in the given color.
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget 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,),),),],);}
}
This function adds the icon directly to the column. The text is inside the Container with only the top spacing separating the text from the icon.
Build a row containing these columns by calling the function and passing the color, icon, and text specific to that column. Use MainAxisAlignment.spaceEvenlyAlign Columns Along Main Axis to evenly arrange the available space before, between, and after each column. Add the following code below the declaration in build()the method :titleSectionlib/main.dart (buttonSection)
Color color = Theme.of(context).primaryColor;
Widget buttonSection = Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [_buildButtonColumn(color, Icons.all, 'CALL'),_buildButtonColumn(color, Icons.near_me, 'ROUTE'),_buildButtonColumn(color, Icons.share, 'SHARE'),],
);
Add the button section to the body:
step4: Realize the text part
Define the text part as a variable. Put the text in Containerand add padding along each edge. buttonSectionAdd the following code below the declaration :lib/main.dart (textSection)
Widget textSection = const Padding(padding: 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,),
);
By softwrapsetting this to true, lines of text will fill the column width before wrapping at word boundaries.
Add text section to body:
step5: Realize the image part
Three of the four column elements are now complete, leaving only the images. Add an image file to the example:
- Create a directory at the top of the project
asset. - add lake.jpg
- Update
pubspec.yamlfile to includeassettags. This makes the image available to your code.
Now you can reference the image from code:
at last
I have compiled a set of "Interview Collection of Front-End Manufacturers", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm, a total of 201 interview questions, and made an answer for each question Answer and analyze.
Friends in need, you can click the card at the end of the article to receive this document and share it for free
Part of the documentation shows:
The length of the article is limited, and the following content will not be displayed one by one
Friends in need, you can click the card below to get it for free