Expanded Class in Flutter

Last Updated : 02 Mar, 2025

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 compared 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 other kinds of widgets like RenderObjectWidgets.

Constructor

Expanded Expanded({
  Key? key,
  int flex = 1,
  required Widget child,
})

Properties of Expanded Class

Property	Description
child	This is the widget present below the expanded class
flex	Flex factor is the ratio in which available space is divided among the children to occupy the main axis. If the flex factor is zero or NULL the child will allocate its size on its own
Key	It manages how one widget is replaced by another widget

Example for Expanded Class

main.dart:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.green,
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'GeeksforGeeks',
            style: TextStyle(
              color: Colors.white,
            ), // Text Style
          ), // Text
          backgroundColor: Colors.green,
          elevation: 20,
        ), // AppBar
        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(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.all(14),
              child: Image.asset('image/dicel.png'),
            ),
          ), // Expanded
        ], // <Widget>
      ), // Row
    ); // Center
  }
}

To know more about how to display images using assets refer this article: Flutter – Asset Image

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

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

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

Example – For Inserting Multiple images

main.dart:

Dart

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.green,
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'GeeksforGeeks',
            style: TextStyle(
              color: Colors.green,
            ), // Text Style
          ), // Text
          backgroundColor: Colors.white,
        ), // AppBar
        body: const DicePage(),
      ), // Scaffold
    ), // Material App
  );
}

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

  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          // For image 1.
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.all(14),
              child: Image.asset('image/dicel1.png'),
            ),
          ),
          // For image 2.
          Expanded(
            child: Container(
              color: Colors.green,
              padding: const EdgeInsets.all(14),
              child: Image.asset('image/dicel2.png'),
            ),
          ), // 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

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

Multiple images with Flex factor

Flutter - Dialogs

naman1404

Improve

Article Tags :

Expanded Class in Flutter

Constructor

Properties of Expanded Class

Example for Expanded Class

Example – For Inserting Multiple images

Similar Reads

Basics

Key Widgets

UI Components

Design & Animations

Forms & Gestures

Navigation & Routing

Hardware Interaction

Sample Flutter Apps

Advance Concepts

Thank You!

What kind of Experience do you want to share?