How to Create Expandable Widget in Flutter

In some situations, we may want to create widgets that are expandable to fill the unwanted space that props between other widgets. In this blog post, let’s check how to create an expandable widget in Flutter.

You can make use of Expanded widget for this purpose. It accepts properties such as flex so that the expansion of widgets can be made controllable.

In the following flutter example, we have three container widgets which are children to Row widget. And the last container widget is wrapped with an expandable widget.

import 'package:flutter/material.dart';

class RowExpandedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Row Example With Expandable'),
      ),
      body: Center(child:Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          Expanded(
            child:Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          )
        ],
      ),
      ),
    );
  }
}

And you can see how the third container behaved by looking into the following output.

flutter expanded row example

And now see how the behavior changes when we use flex property with Expanded widget.

import 'package:flutter/material.dart';

class FlexExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Row Example'),
      ),
      body: Center(child:Row(
        children: <Widget>[
          Expanded(
          flex: 2,  
          child:Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          ),
          Expanded(
            flex: 1,
          child:Container(
            child: Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          ),
          ),
          Expanded(
            flex: 3,
            child:Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          )
        ],
      ),
      ),
    );
  }
}

And the following is the output.

flutter flex example

Thank you for reading!

Leave a Comment

Your email address will not be published. Required fields are marked *