Skip to content
Related Articles

Related Articles

Expanded Class in Flutter
  • Last Updated : 15 Feb, 2021

When we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compare to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an expanded widget so that the child occupies only the available space along the main axis. When we create multiple children then the available space between the children will divide according to the flex factor. An expanded widget contains only the stateful widget or stateless widget not another kind of widgets like RenderObjectWidgets.

Syntax:
Expanded(
         {
          Key key, 
          int flex: 1,
          @required Widget child,
         }
)

Properties of Expanded Class:

  • child: This is the widget present below the expanded class
  • Flex factor: Flex factor is the ratio in which available space is divided between the children to occupy in the main axis. If the flex factor is zero or NULL the child will allocate its size by own.
  • Key: It manages how one widget is replaced by another widget
  • FlexFit: It defines how flexible one widget to acquire available space.

Example:

Dart




import 'package:flutter/material.dart';
void main() {
 return runApp(
   MaterialApp(
     home: Scaffold(
       backgroundColor: Colors.green,
         
       // App Bar is used to create 
       // a bar to give a title for our app
       appBar: AppBar(
         centerTitle: true,
         title: Text('GeeksforGeeks',
                       
         // TextStyle is a class
         // where we can modify our text
         style: TextStyle(
             
           //To assign the color to our text
             color: Colors.green,
          ),    //Text Style
         ),     //Text
           
         // backgroundColor is used to change
         // the color of our app bar background
         backgroundColor: Colors.white,
       ),      //AppBar
         
       // Calling the funtion DicePage()
       body: DicePage(),
     ),      //Scafflod
   ),        //Material App
 );
}
  
class DicePage extends StatefulWidget {
 @override
 _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: 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
 }           
}

Output:

In the below image the image of dice goes out of the screen because the required size for the image is more than the screen size.



Without using Expanded class

Without using Expanded class

We have used the Expanded class to make our image more flexible so that it can fit the screen size.  

Image after using Expanded class

Image after using Expanded class

By using the Expanded class our image has fitted to available space only.

Example: For Inserting Multiple images 

Dart




import 'package:flutter/material.dart';
void main() {
 return runApp(
   MaterialApp(
     home: Scaffold(
       backgroundColor: Colors.green,
         
       // App Bar is used to create
       // a bar to give a title for our app
       appBar: AppBar(
         centerTitle: true,
         title: Text('GeeksforGeeks',
                       
            // TextStyle is a class
            // where we can modify our text
         style: TextStyle(
             
           //To assign the color to our text
             color: Colors.green,
          ),    //Text Style
         ),     //Text
           
         // backgroundColor is used to
         // change the color of our
         // app bar background
         backgroundColor: Colors.white,
       ),      //AppBar
         
       //Calling the funtion DicePage()
       body: DicePage(),
     ),      //Scafflod
   ),        //Material App
 );
}
  
class DicePage extends StatefulWidget {
 @override
 _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> [
           
         // For Image 1
         Expanded(
             
           // Flex is used to allocate
           // available space in the ratio
           // of one child to another child
           // it can be any value.
           flex: 2,
             
           // FlatButton is used to make
           // are image as a button which we can press. 
          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
         ),  
         // For image 2.
         Expanded(
           child: FlatButton(
             child: Image.asset('images/dice2.png'),
           ),  //flat button
         ),   //Expanded
       ],     //<Widget>
     ),       //Row
   );         //center
 }           
}

Output:

In this, we have inserted the multiple-image of dice. By default, the flex size is 1, but we can change it to our requirement.

Multiple Images

Multiple Images

This Flex factor is set to 2 and image 1 is twice the size of image two.

Multiple images with Flex factor

Multiple images with Flex factor

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :