How to Design LinearLayout in Flutter For Android Developers?

Original author: Burhanuddin Rashid

The Nuggets translation Project

Permanent link to this article: github.com/xitu/gold-m…

Translator: androidxiao

Proofread by: Starriers

How to Design a LinearLayout in a Flutter?

Photo by Marvin Ronsdorf on Unsplash.

This blog is for Android developers aiming to apply their existing Android knowledge to building mobile applications using Flutter. In this blog, we will explore the equivalent design components of LinearLayout in Flutter.

A series of

How to design the ACTIVITY UI in Flutter?
How to design a LinearLayout in a Flutter? (Right here)

A prerequisite for

This blog has assumed that you have flutter configured on your PC and can run the Hello World application. If you have not already installed Flutter, click here.

Dart is based on object-oriented concepts, so as an Android Java developer, you’ll be able to master Dart with ease.

Let’s get started

If you’re an Android developer, I assume you use a lot of LinearLayout when designing your layout. For those who are not familiar with LinearLayout, I will give the official definition.

A LinearLayout is a layout that can arrange other views horizontally in a single column or vertically in a single row.

The effect shown above is the same as the definition itself, and you can determine what the equivalent widget in Flutter is. Yeah, you’re right, they’re rows and columns.

Note: The Row/column widget does not scroll. If you have a list of widgets and want them to scroll without enough space, consider using ListView.

Now we’ll cover some of the major properties of the LinearLayout that can be converted to equivalent widget properties in the Flutter.

Direction of 1.

In LinearLayout, you can define the orientation of its subentries using the Android :orientation =”horizontal” property, which takes horizontal/vertical as a value similar to the row/column widgets in the Flutter.

In Android, the LinearLayout is a ViewGroup that you can add subviews to. You can set all the child views within the </ LinearLayout> tag. Therefore, to set up child widgets in our Row/Column widget, we need to use the Row/ column. children property, which accepts the List. See the code snippet below.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("LinearLayout Example"), ), body: new Container( color: Colors.yellowAccent, child: new Row( children: [ new Icon( Icons.access_time, size: 50.0,), new Icon(Icons. Pie_chart, size: 100.0,), new Icon(Icons. Email, size: 50.0,),); }}Copy the code

In this example, we use the Row widget for the Android: Orientation =”horizontal” property of LinearLayout. We use Column as the vertical value. If you want to know what Scaffold does here, you can read my previous article how Scaffold design activity UI in Flutter?

2. “match_parent” vs “wrap_content”

MATCH_PARENT: This means that the view wants to be as big as its parent, and if your view is the top-level root view, it will be as big as the device screen.
WRAP_CONTENT: This means that the view should be large enough to contain its content.

To get the behavior of match_parent and WRap_content, we need to use the mainAxisSize property in the Row/Column widget. The mainAxisSize property takes the mainAxisSize enumeration, which has two values, The behavior of MainAxisSize. Min and MainAxisSize. Max correspond to wrap_content and match_parent.

In the example above, we didn’t define any mainAxisSize properties for the Row widget, so by default its mainAxisSize property is set to mainAxissize.max, which is match_parent. The yellow background of the container represents the way free space is covered. This is how we define this attribute in the above example and examine the output with different attribute values.

. body: new Container( color: Colors.yellowAccent, child: new Row( mainAxisSize: MainAxisSize.min, children: [...] ,),)...Copy the code

This is how we visually distinguish the properties used in the Row/Column widget.

3. The weight

The weight specifies how the sub-view is positioned within its own scope. We use android with multiple aligned values :gravity =”center” to define the default weight in the LinearLayout. The same functionality can be achieved in the Row/Column widget using the MainAxisAlignment and CrossAxisAlignment attributes.

1. Main shaft alignment,:

This property defines how the child view should be placed along the main axis (row/column). For this to work, if you set the value to mainAxissie.min, you should provide some space in the Row/Column widget, that is, wrAP_content setting MainAxisAlignment has no effect on the widget since there is no space available.

. body: new Container( color: Colors.yellowAccent, child: new Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: [...] ,),)...Copy the code

A picture is worth a thousand words and I prefer a visual presentation rather than describing every attribute.

So in the case of this output, compare the LinearLayout property with the MainAxisAlignment property in the Row Widget.

Now let’s compare it to the column control.

Exercise: You can try other enumerated values, spaceinstituted, spaceAround, spaceBetween, which will behave the same as the vertical/horizontal chain we used in ConstraintLayout.

2. Cross axis alignment :

This property defines how child views should be placed along the horizontal axis. This means that if we use the Row widget, the weight of the child view will be based on vertical lines. If we use the Column widget, the child view will be benchmarked against a horizontal line.

That sounds confusing! Don’t worry, you’ll understand better as you read further.

For better understanding, we’ll make it wrap_content, mainaxissie.min. You can define a CrossAxisAlignment. Start attribute as shown in the following code.

. body: new Container( color: Colors.yellowAccent, child: new Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [...] ,),)...Copy the code

Therefore, the output below compares the LinearLayout property with the CrossAxisAlignment property in the Row Widget.

Now let’s compare it to the column control.

The stretching behavior is a little different, stretching the widget to its maximum available space, its intersecting axis match_parent.

3. Layout weight

To create a linear layout where each child view uses the same space or divides the space on the screen in a specific proportion, We set each view’s Android :layout_height to “0dp” (for vertical layouts) or each view’s Android :layout_width to “0DP” (for horizontal layouts). Then set each view’s Android :layout_weight to “1” or any other value depending on the space to be divided.

To achieve the same functionality in the Flutter Row/Column widget, we wrapped each child View into a Expanded widget whose Flex property is equivalent to our Android :layout_weight, So by defining flex values we define the amount of space for a particular child element of the application.

This is how you define weights/elasticity for each child.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("LinearLayout Example"), ), body: new Container( color: Colors.yellowAccent, child: new Container( child: new Row( children: [New Expanded(child: new Container(child: new Icon(Icons. Access_time, size: 50.0,), color: colors.red,), Flex: 2,), new Expanded(child: new Container(child: new Icon(Icons. Pie_chart, size: 100.0,), color: Color.blue,), flex: 4,), new Expanded(Child: new Container(Child: new Icon(Icons. Email, size: 50.0,), color: Colors.green, ), flex: 6, ), ], ), ), ), ), ); }}Copy the code

For better understanding, we wrap each icon in a container with a background color so that we can easily identify the space that the widget has covered.

conclusion

The LinearLayout is used extensively in Android, as is the Row/Column widget. Hope to cover more topics in an upcoming blog. I’ve created a sample application to demonstrate Row/Column properties and how they work when combined.

Take a look at the Android example here.

Burhanrashid52 / FlutterForAndroidExample: Contribute to FlutterForAndroidExample development by creating an account on GitHub.

Thanks!!

If you find this article helpful. Please bookmark, share and clap so others will see it in the video. If you have any questions or suggestions, feel free to comment on this blog or give me a like on Twitter, Github or Reddit.

To get the latest updates on my upcoming blog, follow me on Medium, Twitter, Github or Reddit.

Burhanuddin Rashid (@burhanrashid52) | Twitter
burhanrashid52 (Burhanuddin Rashid) GitHub
Burhanrashid52 (u/burhanrashid52) – Reddit

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.

How to design a LinearLayout in a Flutter?