Code the Flex using Dart Flutter

This article is a part of User Interface development notebook by Fariz Mamad

UI design may have typical components or widgets ratio to make it aesthetic. We, the UI developer, have to scale the ratio of widgets appropriately within the screen.

Flex helps us code the ratio. In short, flex is the parameter that set the area occupied by widgets based on the number of widgets. For examples:
# w = widgets
2 w in 1 area = flex with denominator 2
3 w in 1 area = flex with denominator 3
4 w in 1 area = flex with denominator 4
… and so forth.

Good news! Code snippets for Dart Flutter is provided here. Check this out.

Flex 1/2

class MyFlexPage extends StatelessWidget { 
  const MyFlexPage({ Key? key }) : super(key: key); 
  @override Widget build(BuildContext context) { 
    return Column ( 
      children: [ 
        Expanded(
          flex: 1, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration(color: Colors.amber,), 
            child: Text(
              "Flex: 1/2", 
              style: TextStyle(color: Colors.white),
            ) 
          ), 
        ), 
        Expanded( 
          flex: 1, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration(color: Colors.green,), 
            child: Text(
              "Flex: 1/2", 
              style: TextStyle(color: Colors.white),
            ), 
          ),
        )
      ]
    );
  }
}

The result of Flex 1/2

Flex 2/3 vs 1/3

class MyFlexPage extends StatelessWidget { 
  const MyFlexPage({ Key? key }) : super(key: key); 
  @override Widget build(BuildContext context) { 
    return Column ( 
      children: [ 
        Expanded( 
          flex: 2, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration (color: Colors.amber,), 
            child: Text(
              "Flex: 2/3", 
              style: TextStyle(color: Colors.white),
            ) 
          ), 
        ), 
        Expanded( 
          flex: 1, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration(color: Colors.green,), 
            child: Text(
              "Flex: 1/3", 
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ],
    )
  }
}

The result of Flex 2/3 vs 1/3

Flex 3/4 vs 1/4

class MyFlexPage extends StatelessWidget { 
  const MyFlexPage({ Key? key }) : super(key: key); 
  @override Widget build(BuildContext context) { 
    return Column ( 
      children: [ 
        Expanded( 
          flex: 3, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration (color: Colors.amber,), 
            child: Text(
              "Flex: 3/4", 
              style: TextStyle(color: Colors.white),
            ), 
          ), 
        Expanded( 
          flex: 1, 
          child: Container( 
            alignment: Alignment.center, 
            width: double.infinity, 
            decoration: BoxDecoration (color: Colors.green,), 
            child: Text(
              "Flex: 1/4", 
              style: TextStyle(color: Colors.white),
            ), 
          ),
        ),
      ],
    );
  }
}

The result of flex 3/4 vs 1/4