Building Layouts Flutter - Columns and Container

Question

God day,

Im having a trouble with layouts in flutter, anyone can help?

EDIT:

i will try to explain better.

I have this screen:

With this code:

return new Container(
      height: height,
      padding: new EdgeInsets.all(10.0),
      child: new Card(
          elevation: 10.0,
          child:
          new Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                new ListTile(
                  trailing:
                  _buildCounterButton(),
                  title: new Center(child: new Text('VENDAS POR PRODUTOS', style: new TextStyle(fontWeight: FontWeight.bold))),
                  subtitle: new Center(child: new Padding(padding: new EdgeInsets.only(top: 5.0), child:
                  new Text('Top 3 produtos dos últimos 30 dias', textAlign: TextAlign.center,))),
                ),


                        new FutureBuilder<List<RelatorioProdutos>>(
                          future: fetchRelatorioPorProduto(new http.Client(),'$dateInicial', '$dateFinal'),
                          builder: (context, snapshot) {
                            if (snapshot.hasError) print(snapshot.error);
                            else
                              auxTelaDetalhada = RelatorioVendasTotalizadasProdutos(prods: snapshot.data, aondeVoltar: 0,);

                            return snapshot.hasData
                                ? new porProdutoList(listas: snapshot.data)
                                : new Center(child: new RefreshProgressIndicator());

                          },
                        ),

                new Expanded(
                    child: new Align(
                        alignment: Alignment.bottomCenter,
                        child: new Padding(padding: new EdgeInsets.only(bottom: 10.0),
                        child: new RaisedButton(
                            child: new Text("Relatório Completo",
                              style: new TextStyle(color: Colors.white, fontSize: 20.0),),
                            color: Colors.blue,
                            elevation: 8.0,
                            splashColor: Colors.lightBlue,
                            onPressed: () {
                              Navigator.pushReplacement(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) => auxTelaDetalhada),
                              );
                            }
                        ),))),
            ],)        
      ),
    );

I want to have this screen in the end of process.

But i have this method:

new FutureBuilder<List<RelatorioProdutos>>(
                          future: fetchRelatorioPorProduto(new http.Client(),'$dateInicial', '$dateFinal'),
                          builder: (context, snapshot) {
                            if (snapshot.hasError) print(snapshot.error);
                            else
                              auxTelaDetalhada = RelatorioVendasTotalizadasProdutos(prods: snapshot.data, aondeVoltar: 0,);

                            return snapshot.hasData
                                ? new porProdutoList(listas: snapshot.data)
                                : new Center(child: new RefreshProgressIndicator());

                          },
                        ),

And this method loads a json request, and i need the button to appear only at the end of json request.

So i was tring to put this RaisedButton in the other method return, with this the button appear only on the end of json request. But, i cant align this button when i put it inside the other method.

Other method:

Widget test =

        new Column(
        children: <Widget>[
            listaTiles[0],
            listaTiles[1],
            listaTiles[2]]);



      return test;

Im tring to do this:

 Widget test =

      new Column(children: <Widget>[
        new Column(
            children: <Widget>[
              listaTiles[0],
              listaTiles[1],
              listaTiles[2]]),
        new Align(
                alignment: Alignment.bottomCenter,
                child: new Padding(padding: new EdgeInsets.only(bottom: 10.0),
                  child: new RaisedButton(
                      child: new Text("Relatório Completo",
                        style: new TextStyle(color: Colors.white, fontSize: 20.0),),
                      color: Colors.blue,
                      elevation: 8.0,
                      splashColor: Colors.lightBlue,
                      onPressed: () {
                        Navigator.pushReplacement(
                          context,
                          new MaterialPageRoute(
                              builder: (context) => auxTelaDetalhada),
                        );
                      }
                  ),)),
      ],);

But i get this:

Anyone have any idea to get this working?

score 0 · Answer 1 · answered Jul 24 '18 at 12:44

Try this... This question is answered here Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning

return new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
          //your elements here
      ],
    );

score 0 · Answer 2 · edited Dec 24 '21 at 06:33

Though I should write it in the comments but it requires 50 reputation but anyways..

This will help you and if you want to center it then wrap the column in the center widget

Center(
            child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                    Container(Text("Hello to all", style: TextStyle(fontSize: 60.0)))
                    ],
                  ),
          ),

This would produce following result. Hope this is what you are looking for:)

Building Layouts Flutter - Columns and Container

2 Answers2