flutter-tutorial

Flutter Layouts

As the application is utilised in multiple places such as the web and mobile devices with varied screen sizes, layout in Flutter describes how the content extends in a particular space. Content that changes dynamically should be displayed properly to the user. Widgets are at the heart of the Flutter layout. Everything in Flutter is a widget, including images, icons, and text; even the layout models are widgets. It enables us to build layouts by combining multiple widgets. Flutter also includes some unique widgets for laying up the user interface, such as Center, Align, Container, and so on.

Types of Flutter Layout

As shown above, Layout in Flutter is created by adding the multiple widgets together to compose the complex widgets.

1. Single Child Widget

A single child widget is one that has only one or two widgets within the parent widget. These single-child widgets are easy to use and make the code more readable for programmers. Flutter provides a plethora of single child widgets for programmers to use in order to create a user interface that is both attractive and simple to use.

The following are some of the most widely used Single Child widgets:

  • Container: It is a simple, popular, box-based widget with a lot of style and customization options. It begins by padding the child and surrounding itself with the empty space known as margin. The padded child is subjected to the additional restraints.
  • Center: This widget is used to centre the child within the widget. The Align class is inherited by this widget. It’s one of Flutter’s simple but really helpful widgets.
  • Align: As the name implies, this widget uses the alignment attribute to align its child within itself. It may also size itself according to the size of its child. The alignment property makes use of the FractionalOffset to pass values for aligning the component according to the requirements. Flutter’s FractionalOffset class specifies the component offset in terms of distance from the top left.
  • Padding: One of the most often used widgets for providing padding to child widgets in order for them to fit into the layout widget. In Flutter, you may add padding to the required sides by using EdgeInserts.
  • Baseline: This widget is used to position the child widget in relation to the baseline.

Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter for Beginners',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Learn Code Zone'),
          ),
          body: Container(
            height: 200.0,
            width: double.infinity,//expand to the width of screen
            padding: const EdgeInsets.all(8.0),
            color: Colors.blue, //<-- directly
            child: Center(
              child: Text(
                'Hello World',
                style: TextStyle(color: Colors.white, fontSize: 30),
              ),
            ),
          ),
        ));
  }
}

2. Multiple Child Widget

Multiple Child Widgets are widgets that feature more than one child widget, with each child widget’s layout being different. A row widget, for example, is used to construct a table with rows and columns. A row widget lays its child object in the horizontal direction, whereas a column widget lays its child object in the vertical direction. Composing this will result in a completely new degree of complexity for a complex widget. Flutter provides the programmer with a number of Multiple Child widgets.

Some of them are given below:

  • Column: This widget, like a regular column, allows its child widget to be shown vertically. The Column widget in Flutter does not scroll because having more than one child than the allowed space in the room is deemed an error.
  • Row: Unlike Column, row widget allows its child widget to be shown horizontally. Flutter’s Row widget also doesn’t scroll since having more than one child in a row is deemed an error.
  • ListView: One of the most often used widgets in Flutter by programmers is the ListView. It permits its children to appear one after the other in a scrolling order. Flutter gives the programmer a lot of options when it comes to creating a ListView.
  • Stack: The programmer can use this widget to stack the numerous child widgets one on top of the other in relation to the box’s edge. In Flutter, it’s one of the most useful yet simple techniques for programmers to overlap child widgets.
  • GridView: The programmer can use this widget to construct a scrollable, two-dimensional array of widgets. It allows you to arrange the cells of repetitive patterns in a horizontal and vertical configuration.

Code

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  // It is the root widget of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Multiple Layout Widget',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.blue,  
      ),  
      home: MyHomePage(),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Container(  
        alignment: Alignment.center,  
        color: Colors.white,  
        child: Stack(  
          children: <Widget>[  
            // Max Size  
            Container(  
              color: Colors.blue,  
            ),  
            Container(  
              color: Colors.pink,  
              height: 400.0,  
              width: 300.0,  
            ),  
            Container(  
              color: Colors.yellow,  
              height: 220.0,  
              width: 200.0,  
            ) ], ), ), ); } }  

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *