Flutter - How to Align (widget) grandchildren widgets the same as the child

0
votes

I've looked for an answer all over google and s.o and couldn't find one to my likin'.

I'm using a Stack widget as my page layout. Inside that Stack, I'm positioning all the child widgets with Align widget. I've tried to create a ListView widget under my Align child, but its cards (children) are ignoring the ListView alignment at the alignment value I set to the List to start from.

    Align(
      alignment: Alignment(0, -0.28),
      child: Divider(
        color: Color.fromARGB(50, 255, 255, 255),
      ),
    ),
    Align(
      alignment: Alignment(0, -0.20),
      child: ListView(
        children: <Widget>[
          Card(
            child: ListTile(
            leading: Icon(some_icon),
            title: Text("blabla"),
          )),
        ],
      ),
    ),

I would expect the ListView items to start under my Divider, as the value set for the vertical alingement is -0.20 which is lower than the Divider alignment (-0.28). But, here's how it looks:

enter image description here

If I remove the ListView and set the Card widget as the Align direct child, the positioning is fine. Now, as I read in the documentation, the Align widget alignment values are respectable by it's only child, so how would I achieve the same for the ListView children (Rows/ListTiles/Card etc)?

2
flutterflutter-layout

2 Answers

0
votes

This is just a sample ! Modify as your requirement. (Edited)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(children: [
      //Your behind widgets here...
      Stack(children: [
        Card(
            color: Colors.white,
            child:
                ListTile(title: Text('1st card', textAlign: TextAlign.center))),
        Align(
          alignment:Alignment(0, -0.20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                height: 2,
                width: double.infinity,
                color: Colors.black,
                margin: EdgeInsets.only(right: 25, left: 25),
              ),
              SizedBox(
                height: 10,
                width: double.infinity,
              ),
              Card(
                  color: Colors.white,
                  child: ListView(shrinkWrap: true, children: [
                    ListTile(
                        title: Text('List card', textAlign: TextAlign.center))
                  ])),
            ],
          ),
        )
      ])
    ]));
  }

Screenshot

0
votes

Please try this...

      body: Container(
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Divider(
                  thickness: 20, // this is for example
                  height: 22, // this is for example
                  color: Colors.red, // this is for example
                ),
                Card (
                    child: ListTile(
                  leading: Icon(Icons.print),
                  title: Text("blabla"),
                )),
              ],
            ),
          ),
        ),
      ),