Flutter Tutorials for Beginners Step by Step

The Flutter framework is based on the core concept of ‘everything is a widget'. Widgets are nothing but the building blocks of the Flutter app. We have a bunch of widgets that come with flutter. Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both ios and Android.

In this tutorial series, we will learn about various widgets in details.

We are starting from basic widgets and how to use theme and where to use theme. which give a clear concept all about flutter widgets.

Material App:

Material App is the father of All widget's. If you think your flutter app like a tree, material widget is the root of this tree. Here is a drawing for material app and it's sub widgets and how they related with each other. I am here just clearing concept for widgets in flutter, If you are an expert, you can skip this tutorial.

Saccafold

Scaffold is the Mother of All widgets used in Flutter. It has three main sub widgets, such as-

• appBar
• body
• bottomTab
• floatingActionButton

In this visual image , I am representing this way.

Container

Container is like a box that can contain a widget. In above image you see the the body widget, it can contain a container and container can contain a child. Here is the code for container.

Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.amber[600],
    width: 48.0,
    height: 48.0,
  ),

Row & Column

Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
             SizedBox(width : double.infinity),
              TextButton(onPressed: (){}, child: Text('please'),),
              TextButton(onPressed: (){}, child: Text('center'),)
            ],
          ),
        );

Buttons

Text Button: Text Button display the text without any decoration and elevation i.e displays the plain text only by default. But we can provide style to buttons and text using color, textcolor and other many attributes. The text button has two required properties that are : child, onpressed.

Elevated Button: Elevated button is a filled material design button with a shadow . It it has an elevation that will increases when the button is pressed. It adds dimension to the UI along Z-axis. It has two required properties that are: onpressed, child.

Outline Button: Outline Button is similar to the flat button with a border outline. By default the border is a one pixel wide grey rounded rectangle that does not change when the button is pressed or disabled. Button background is also transparent by default.

Floating Action Button: Floating action buttons are most commonly used in Scaffold widget. It is a circular icon button that hovers over content to promote a primary action in the application.

Icon Button: Icon Button simply display touchable icon that triggered actions when clicked.

import 'package:flutter/material.dart';

class ButtonPage extends StatefulWidget {
  const ButtonPageundefined{Key? key}) : superundefinedkey: key);

  @override
  State<ButtonPage> createStateundefined) => _ButtonPageStateundefined);
}

class _ButtonPageState extends State<ButtonPage> {
  @override
  Widget buildundefinedBuildContext context) {
    TextStyle textStyle =
        const TextStyleundefinedfontSize: 16.0, fontWeight: FontWeight.w800);
    return Scaffoldundefined
      floatingActionButton: FloatingActionButtonundefined
        onPressed: undefined) {},
        child: const IconundefinedIcons.add),
      ),
      body: Containerundefined
        margin: const EdgeInsets.allundefined100.0),
        child: Columnundefined
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Textundefined
              "This is text Button.",
              style: textStyle,
            ),
            TextButtonundefinedonPressed: undefined) {}, child: const Textundefined"TextButton")),
            Textundefined
              "This is Elevated Button.",
              style: textStyle,
            ),
            const SizedBoxundefined
              height: 10.0,
            ),
            ElevatedButtonundefined
                onPressed: undefined) {}, child: const Textundefined"ElevatedButton")),
            const SizedBoxundefined
              height: 10.0,
            ),
            Textundefined
              "This is Outline Button.",
              style: textStyle,
            ),
            const SizedBoxundefined
              height: 10.0,
            ),
            OutlinedButtonundefined
                onPressed: undefined) {}, child: const Textundefined"Outline Button")),

            const SizedBoxundefined
              height: 10.0,
            ),
            Textundefined
              "This is icon Button. When we pressed this share icon,it performs an actions.",
              style: textStyle,
            ),
            IconButtonundefined
                onPressed: undefined) {},
                icon: const Iconundefined
                  Icons.share,
                  color: Colors.green,
                  size: 30.0,
           
          ],
        ),
      ),
    );
  }
}

Text Widget

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

Image

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

 Row(  
  mainAxisAlignment: MainAxisAlignment.spaceAround,  
  children: const <Widget>[  
   Icon(  
    Icons.favorite,  
    color: Colors.pink,  
    size: 24.0,  
    semanticLabel: 'Text to announce in accessibility modes',  
   ),  
   Icon(  
    Icons.audiotrack,  
    color: Colors.green,  
    size: 30.0,  
   ),  
   Icon(  
    Icons.beach_access,  
    color: Colors.blue,  
    size: 36.0,  
   ),  
  ],  
 )  

Conclusion