12 Common Flutter Widgets with Practical Examples

Home » Flutter » 12 Common Flutter Widgets with Practical Examples

In this lesson, you will learn how to practice the most common flutter widgets (basic flutter widgets). Most of the examples have screenshots of outputs for a better understanding of the widgets.

12 Common Flutter Widgets with Practical Examples

1. Text Widget

About this widget : The official doc says, “A run of text with a single style” learn more about Text widget

Text("Hello, Text")

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(TextExample());
}

class TextExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Center(
            child: Text("Hello, Text"),
        ),
      ),
    );
  }
}

Common Flutter Widget Text

2. Placeholder

About this widget : The placeholder widget is one of the useful widgets. It helps to reserve a place for content. By default, the placeholder is sized to fit its container.

Placeholder(
  strokeWidth: 3,
  fallbackHeight: 50,
  color: Colors.red,
),

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(PlaceHolderExample());
}

class PlaceHolderExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Center(
          child:
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Hello"),
                Placeholder(
                  strokeWidth: 3,
                  fallbackHeight: 50,
                  color: Colors.red,
                ),
                Text("Jack!"),
                Text("Aswin"),
              ],
            )
        ),
      ),
    );
  }
}

12 Common Flutter Widgets with Practical Examples

3. FlutterLogo

About the widget : Flutter logo widget creates a different variety of flutter logos.

FlutterLogo(
  size: 200,
  style: FlutterLogoStyle.horizontal,

)

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(FlutterLogoExample());
}

class FlutterLogoExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Logo Example"),),
        body: Center(
            child: Column(
              children: [
                FlutterLogo(
                  size: 120,
                  style: FlutterLogoStyle.horizontal,

                ),

                FlutterLogo(
                  size: 120,
                  style: FlutterLogoStyle.markOnly,

                ),
                FlutterLogo(
                  size: 120,
                  style: FlutterLogoStyle.stacked,

                ),

              ],
            )
        ),
      ),
    );
  }
}

4. Icon

About the widget : Icon produces icons of different colours and sizes.

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 15,
  semanticLabel: 'accessibility mode',
),

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(IconExample());
}

class IconExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Icons"),),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.favorite,
                color: Colors.red,
                size: 35,
                semanticLabel: 'accessibility mode',
              ),
              Icon(
                Icons.face,
                color: Colors.grey,
                size: 35,
                semanticLabel: 'accessibility mode',
              ),

              Icon(
                Icons.mail_outline,
                color: Colors.green,
                size: 50,
                semanticLabel: 'accessibility mode',
              ),

            ],

          ),
        ),
      ),
    );
  }
}

12 Common Flutter Widgets with Practical Examples

5. ElevatedButton

About this widget : It’s a replacement for deprecated RaisedButton in Flutter.

ElevatedButton(
    onPressed: () {
      // do some tasks
    },
    child: const Text(' Click me')),

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(ElevatedButtonExample());
}

class ElevatedButtonExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("ElevatedButtonExample"),),
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: null,
                    child: const Text('Disabled Button')),
                ElevatedButton(
                    onPressed: () {
                      // do some tasks
                    },
                    child: const Text(' Click me')),

              ],
            )
        ),
      ),
    );
  }
}

ElevatedButton common flutter widgets example

6. Container

About this widget : Container combines common painting, positioning, and sizing properties.

Container(
  width: 400,
  height: 200,
  color: Colors.red,
  margin: const EdgeInsets.all(10),)

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(ContainerExample());
}

class ContainerExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Container"),),
        body: Center(
            child: Container(
              width: 400,
              height: 200,
              color: Colors.red,
              margin: const EdgeInsets.all(10),
              child: Text("Hello", textScaleFactor: 4,),
              padding: const EdgeInsets.all(40),
            )
        ),
      ),
    );
  }
}

7. Stack

About this widget : The Stack widget helps to overlap multiple children. You can place a photo over a boxed image using this widget.

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 300,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 100,
      color: Colors.green,
    ),)

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(StackExample());
}

class StackExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Center(
           child: Stack(
             alignment: Alignment.center,
             children: [
               Container(
                 width: 300,
                 height: 200,
                 color: Colors.red,
               ),
               Container(
                 width: 150,
                 height: 100,
                 color: Colors.green,
               ),
               Container(
                 width: 75,
                 height: 50,
                 color: Colors.amber,
               ),

             ],
           ),
        ),
      ),
    );
  }
}

8. Row

Learn more about Row

About this widget : Lays out a list of child widgets in the horizontal direction.

Row(
   children: [
     Text("One.. "),
     Text("Two.. "),
     Text("Three.."),
   ],
),

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(RowExample1());
}

class RowExample1 extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Row(
           children: [
             Text("One.. "),
             Text("Two.. "),
             Text("Three.."),
           ],
        ),
      ),
    );
  }
}

9 Column

Learn more about Column widget

About the widget : Lays out a list of children in the vertical direction.

 Column(
   children: [
     Text("One.. "),
     Text("Two.. "),
     Text("Three.."),
   ],

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(ColumnExample1());
}

class ColumnExample1 extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Column(
           children: [
             Text("One.. "),
             Text("Two.. "),
             Text("Three.."),
           ],
        ),
      ),
    );
  }
}

10. Center

About this widget : A widget that centres its child within itself.

Center(
  child: Column(
     children: [
       Text("One.. "),
       Text("Two.. "),
       Text("Three.."),
     ],

main.dart

import 'package:flutter/material.dart';
void main()
{
  runApp(CenterExample());
}

class CenterExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Center(
          child: Column(
             children: [
               Text("One.. "),
               Text("Two.. "),
               Text("Three.."),
             ],
          ),
        ),
      ),
    );
  }
}

11. Image

Learn more about Image widget

12. Expanded

About the widget : The Expanded widget is one of the productive widgets that can accommodate child widgets in available space.

Expanded(
  child: Container(
    width: 100,
    height: 50,
    color: Colors.yellow,
    child: Text("YELLOW"),
  ),
),

Without Expanded widget

Let’s fix it.

import 'package:flutter/material.dart';
void main()
{
  runApp(ExpandedExample());
}

class ExpandedExample extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Text"),),
        body: Row(
          children: [
            Expanded(
              child: Container(
                width: 100,
                height: 50,
                color: Colors.red,
                child: Text("RED"),
              ),
            ),
            Expanded(
              child: Container(
                width: 100,
                height: 50,
                color: Colors.yellow,
                child: Text("YELLOW"),
              ),
            ),
            Expanded(
              child: Container(
                width: 100,
                height: 50,
                color: Colors.green,
                child: Text("GREEN"),
              ),
            ),
            Expanded(
              child: Container(
                width: 100,
                height: 50,
                color: Colors.grey,
                child: Text("GREY"),
              ),
            ),
          ],
        )
      ),
    );
  }
}

You may also like...

1 Response

  1. 20/07/2021

    […] Now let’s compose our app’s UI and call appropriate methods to our UI. Let’s use some common flutter widgets […]

Leave a Reply

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