我想用listview创建一个颤动的应用程序

Question

I need to create an app that looks like this Flutter design .

I'm struggling to place the text where I want. This is my code so far

     body: Padding(
    padding: const EdgeInsets.all(0.1),
    child: new Container(
      child: new Center(
       child: new ListView(

          children: <Widget>[

            new Card(//card 1

              child: new Container(
                color: Colors.grey,
                padding: new EdgeInsets.only(
                    left: 160.0, top: 0.01, right: 160.0, bottom: 0.01),
                child: new Column(

                  children: <Widget>[
                    new Text('My Profile')
                  ],
                ),
              ),
            ),

          ],
        ),

      )
    ),
  )

Answer 1

Your large padding of 160 made it seem like the text was centered on my device. You can always align the text to the left inside Column s by setting crossAxisAlignment to CrossAxisAlignment.start .

This code should produce some output that is similar to your drawing (I also removed some unnecessary Center s, Container s and Padding s):

Scaffold(
  appBar: AppBar(),
  body: ListView(
    padding: const EdgeInsets.all(0.1),
    children: <Widget>[
      Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              width: double.infinity,
              color: Colors.grey,
              child: Text('My Profile'),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Text('My text\nMy text\nMy text\nMy text'),
            ),
          ],
        ),
      ),
    ],
  ),
);