Flutter Expanded Class Example Tutorial

Aug 27, 2022



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(


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);


// ignore: library_private_types_in_public_api

_DicePageState createState() => _DicePageState();


class _DicePageState extends State<DicePage> {


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>[


// 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