Flutter responsive column

Question

I have several containers which have a different content, eg. checkbox, text... They are placed in column which is inside SingleChildScrollView (scroll if the screen becomes too tiny).

I try to use extended flex and spacers to increase the size of my container to fill more space in the bigger screen, but SingleChildScrollView and expanded are incompatible.

If I remove my SingleChildScrollView I'm not sure if my list can always be displayed on a small height screen. I would like to set minHeight to keep content on some container and let others reduce.

Could you help me to find the most responsive solution?

Answer 1

Use 'Expanded' and 'Flexible' Widget for this.

For example:

 @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.red,
              child: Center(
                child: Text('Item 1'),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text('Item 2'),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.green,
              child: Center(
                child: Text('Item 3'),
              ),
            ),
          ),
        ],
      ),
    );
  }