automatic height of the container in the flutter

user_11202504 0
Viewed 2594

I wrote a page, at the top everything is fine, as it should be. And at the bottom I have a history of events. The width of my container is determined automatically (depending on the width of the screen), and the height - no, on different devices different heights (indents at the bottom are different). Is it possible to determine the height automatically (to the end of the screen) ?? Also, I'd like to add a scroll bar at the bottom for this container so that when events appear there, I can scroll through them both bottom and top. I will be grateful for your help.

My page: enter image description here

My code:

 Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
        color:Colors.white12
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[

            Column(
                children: <Widget>[
                  SizedBox(height: 20.0),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      FlatButton(
                        textColor: Colors.blueGrey,
                        color: Colors.transparent,
                        child: Text('yes',textScaleFactor: 2.5),
                        onPressed: null,
                        padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
                      ),
                      FlatButton(
                        textColor: Colors.blueGrey,
                        color: Colors.transparent,
                        child: Text('no',textScaleFactor: 2.5),
                        onPressed: null,
                        padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
                      )
                    ],
                  ),
                  SizedBox(height: 15.0),
                  Container(
                      child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
                      padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
                  ),
                  Container(
                    child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
                    padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
                  ),
                  Center(
                      child: Container(
                        alignment: Alignment.center,
                        width: double.infinity,
                        height: 430,
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1.5
                            ),
                            borderRadius: BorderRadius.circular(25)
                        ),
                        child: new Column(
                          children: [
                            Container(
                                child: Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
                                padding: EdgeInsets.all(2.0)
                            ),
                          ],
                        ),

                      )//Container
                  )
                ]
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _scanQR();
          });
        },
        child: const Icon(Icons.qr_code),
        backgroundColor: Colors.pink,

      ),
    );
  }

My scrin (after updating the code)

enter image description here

dart flutter
2 Answers
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[
        SizedBox(height: 20.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            FlatButton(
              textColor: Colors.blueGrey,
              color: Colors.transparent,
              child: Text('yes', textScaleFactor: 2.5),
              onPressed: null,
              padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
            ),
            FlatButton(
              textColor: Colors.blueGrey,
              color: Colors.transparent,
              child: Text('no', textScaleFactor: 2.5),
              onPressed: null,
              padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
            )
          ],
        ),
        SizedBox(height: 15.0),
        Container(
          child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
          padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
        ),
        Container(
          child: Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)),
          padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
        ),
        Expanded(
            child: Padding(
                padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
                child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(border: Border.all(width: 1.5), borderRadius: BorderRadius.circular(25)),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                            height: 45,
                            child: Text("history events", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)),
                            padding: EdgeInsets.all(2.0)),
                        Expanded(
                            child: Scrollbar(
                                child: new ListView(
                          shrinkWrap: true,
                          children: [
                            Container(
                                child: Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
                                padding: EdgeInsets.all(2.0)),
                            SizedBox(
                              height: 200,
                            ),
                            Container(
                                child: Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
                                padding: EdgeInsets.all(2.0)),
                            SizedBox(
                              height: 200,
                            ),
                            Container(
                                child: Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
                                padding: EdgeInsets.all(2.0)),
                            SizedBox(
                              height: 50,
                            ),
                          ],
                        ))),
                      ],
                    ))))
      ]),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // _scanQR();
          });
        },
        child: const Icon(Icons.qr_code),
        backgroundColor: Colors.pink,
      ),
    );
  }
user_169189790

You can alter the responsive height or width by using Media Query .To do that you need to wrap your Scaffold with Material App or Cupetino App which allows you to use MediaQuery .

void main() {
  runApp(MaterialApp(home: MyApp()));
}

To make the list scrollable simply you can use ListView.builder

Center(
                  child: Container(
                margin: new EdgeInsets.only(bottom: 20,right: 15,left: 15),
                alignment: Alignment.center,
                width: double.infinity,
                height: MediaQuery.of(context).size.height/1.5,
                decoration: BoxDecoration(
                    border: Border.all(width: 1.5),
                    borderRadius: BorderRadius.circular(25)),
                child: new Column(
                  children: [
                    Container(
                        child: Text("history events",
                            style: TextStyle(
                                fontSize: 20.0, color: Colors.blueGrey)),
                        padding: EdgeInsets.all(2.0)),
                  ],
                ),
              ) //Container
                  )

I added a little margin to make it looks better.Ofcourse you can also use MediaQuery for margin or padding if you want to. https://i.stack.imgur.com/W6oXd.png

user_168446680
Related