Блог

Мне нужно создать приложение, которое выглядит как этот дизайн Flutter.

Я изо всех сил пытаюсь разместить текст там, где я хочу. Пока это мой код

      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')
                  ],
                ),
              ),
            ),

          ],
        ),

      )
    ),
  )
  

Из-за вашего большого заполнения 160 создавалось впечатление, что текст был сосредоточен на моем устройстве. Вы всегда можете выровнять текст по левому краю внутри Column s, установив crossAxisAlignment значение CrossAxisAlignment.start .

Этот код должен выдавать некоторый результат, похожий на ваш чертеж (я также удалил некоторые ненужные Center s, Container s и 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 textnMy textnMy textnMy text'),
            ),
          ],
        ),
      ),
    ],
  ),
);