Flutter Expanded Class Example Tutorial

Hello Friends,

In this tutorial, I will show you a flutter expanded class example. step by step explain the expanded class in a flutter. This article will give you a simple example of how you use expanded flutter. I’m going to show you how to use expanded in a flutter.

In this example, we will explore the Expanded and Flexible Widget In FLutter. We will also implement a demo of the Expanded and Flexible Widget, and describes its properties. and how to use them in your flutter applications. So let’s get started.

Step 1: Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

- $flutter create flutter_expanded_class_example

Navigate to the project directory:

- $cd flutter_expanded_class_example

Step 2: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

void main() {
    return runApp(
        MaterialApp(
            home: Scaffold(
                backgroundColor: Colors.white,

                // App Bar is used to create
                // a bar to give a title for our app
                appBar: AppBar(
                    title: const Text(
                        'Expanded Class',

                        // TextStyle is a class
                        // where we can modify our text
                        style: TextStyle(
                            //To assign the color to our text
                            color: Colors.white,
                        ), //Text Style
                    ), //Text

                    // backgroundColor is used to change
                    // the color of our app bar background
                    backgroundColor: Colors.blue,
                ), //AppBar

                // Calling the function DicePage()
                body: const DicePage(),
            ), //Scaffold
        ), //Material App
    );
}

class DicePage extends StatefulWidget {
    const DicePage({Key? key}) : super(key: key);

    @override
    // ignore: library_private_types_in_public_api
    _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
    @override
    Widget build(BuildContext context) {
        return Center(
            //Here we are using the row.
            // Instead of row we can also use
            // column only the alignment of icon
            // will change and other function remains same
            child: Row(
                children: <Widget>[
                    Expanded(
                        // FlatButton is used to make
                        // are image as a button which we can press.
                        child: TextButton(
                            child: Container(
                                color: Colors.blue,
                                padding: const EdgeInsets.all(14),
                                child: Image.asset('assets/images/1.jpg'),
                            ),
                            onPressed: () {},
                        ),

                        // FlatButton is depreacted and should not be use
                        // We can use TextButton instead of FlatButton

                        // child: FlatButton(
                            // //Image.asset is used to import the image
                            // // from our project files only in brackets
                            // // we are providing the name of our image.
                            // child: Image.asset('images/dice1.png'),
                        // ), //flat button
                    ), //Expanded
                ], //<Widget>
            ), //Row
        ); //center
    }
}