Flutter: Make a Widget Fill Remaining Space of Column, Row - 2022

In flutter, we are using various widgets in daily life and frequently we are using columns and rows. Column and row will occupy only the required space and then What about the remaining space? So in this article, We will go through how to make a widget fill the remaining Space In the Column and Row using expand view. An expanded widget can use as the child of a Row, Column, and Flex. We can use like below example using a column.


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

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
          body: Column(
            children: [
            Container(
            width: double.infinity,
            height: 100,
            color: Colors.amberAccent,
            child: const Center(
              child: Text('Errorgram'),
            ),
          ),

        Expanded(
          child: Container(
            width: double.infinity,
            color: Colors.deepOrangeAccent,
            child: const Center(
              child: Text('Fill remaining space'),
            ),
          ),
        ),]
      )),
    );
  }
}

Another example using a row.

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

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
          body: Row(
            children: [
            Container(
            width:100 ,
            height: double.infinity,
            color: Colors.amberAccent,
            child: const Center(
              child: Text('Errorgram'),
            ),
          ),

        Expanded(
          child: Container(
            height: double.infinity,
            color: Colors.deepOrangeAccent,
            child: const Center(
              child: Text('Fill remaining space'),
            ),
          ),
        ),]
      )),
    );
  }
}

I hope you like this article and it will be help to you.

Tags: