-1

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?

PrzemekTom
  • 1,328
  • 1
  • 13
  • 34
JD11
  • 1
  • 1
  • Use 'Expanded' and 'Flexible' Widget for this. – Abhishek Bardolia Feb 24 '23 at 14:21
  • I try this but how to handle minheight for container and overflow for small screen? – JD11 Feb 24 '23 at 14:23
  • You can use [MediaQuery.of(context).size.height] this will store its height in responsive way. – Abhishek Bardolia Feb 24 '23 at 15:08
  • Did you research this? Where? If it didn't help tell us why. What did you try? If you didn't try, why not? If you did, what did you do? We'd like to see your minimal attempt to solve it. Telling us that information helps avoid duplicating effort and improves the question. – the Tin Man Feb 27 '23 at 22:44

1 Answers1

0

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'),
              ),
            ),
          ),
        ],
      ),
    );
  }
Abhishek Bardolia
  • 121
  • 10
  • Thanks for your solution but it give me an error :RenderFlex children have non-zero flex but incoming height constraints are unbounded. – JD11 Feb 24 '23 at 16:45
  • just add the widget of SizedBox above column and give height:MediaQuery.of(context).size.height and let me know if it is working or not. – Abhishek Bardolia Feb 25 '23 at 05:28