Какой виджет использовать для центрального текста и левой кнопки

Question

Я делаю макет для приложения flutter

Я хочу сделать

 -----------------------
|[i]      [text]        |
|                       |

Значок должен быть слева (отступ 5 пикселей), а текст должен быть в центре экрана.

Сначала я должен использовать Column

Однако мой макет не тот пропорции

Это может быть просто, как я могу это сделать ??

Answer 1

Stack() - один из многих вариантов, которые вы можете использовать. Примерно так:

Stack(
  children:<Widget>[
    Padding(
       padding: EdgeInsets.only(left: 5),
       child: Icon(Icons.info),
    ),
    Align(
      alignment: Alignment.topCenter,
      child: Text("I'm on the top and centered."),
    ),
  ],
),

Answer 2

Это можно сделать примерно так:

Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.info),
              Text('text'),
              Opacity(opacity: 0, child: Icon(Icons.info)),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.all(5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.info),
              Text('second text'),
              Opacity(opacity: 0, child: Icon(Icons.info)),
            ],
          ),
        ),
      ],
    );
}

Результат:

введите описание изображения здесь

Answer 3

Это был ответ, который я дал некоторое время go по той же проблеме, но другая ситуация была вертикальной (столбец), а не горизонтальной (строка). Просто замените Строку и Столбцы на Столбец и Строки в этом примере, и вы поймете идею.

В мой код добавлен серый цвет, чтобы показать разницу между двумя подходами.

Стек будет работать, но это перебор для этого, проблемы такого рода являются частью того, почему у нас есть Expandeds и Flexibles. Уловка состоит в том, чтобы использовать три гибких элемента (2 расширенных и одну распорку). Поместите распорку сверху. Он и нижняя часть развернутой части должны иметь одинаковое значение гибкости, чтобы центрировать расширенную середину.

import 'package:flutter/material.dart';

class CenteringOneItemWithAnotherItemInTheColumn extends StatelessWidget {
  const CenteringOneItemWithAnotherItemInTheColumn({
    Key key,
  }) : super(
    key: key,
  );

  /// Adjust these values as needed
  final int sameFlexValueTopAndBottom = 40; // 40%
  final int middleFlexValue = 20; // 20%

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Column Alignment Question'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Spacer(),
              const Text(
                'Cent',
                style: TextStyle(
                  fontSize: 64,
                ),
              ),
              const Spacer(),
              const Text(
                'Bot',
                style: TextStyle(
                  fontSize: 64,
                ),
              ),
            ],
          ),
          Column(
            children: <Widget>[
              /// The key is to have the Spacer and the bottom Expanded
              /// use the same value for flex. That will cause the middle
              /// child of the Column to be centered vertically.
              Expanded(
                flex: sameFlexValueTopAndBottom,
                child: Container(
                  width: 100,
                  color: Colors.grey[300],
                ),
              ),
              Expanded(
                flex: middleFlexValue,
                child: const Align(
                  alignment: Alignment.center,
                  child: Text(
                    'Cent',
                    style: TextStyle(
                      fontSize: 64,
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: sameFlexValueTopAndBottom,
                child: Container(
                  color: Colors.grey[300],
                  child: const Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Bot',
                      style: TextStyle(
                        fontSize: 64,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 4

Я могу опоздать, но я хочу, чтобы этот ответ был там, если кто-то сочтет его лучше для целей разработки в будущем.

Мы можем сделать многоразовый виджет, который мы можем использовать внутри основного виджета. Виджет будет принимать text и icon для передачи при вызове

  // IconData is the data type for the icons
  Widget myWidget(String text, IconData icon) => Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      // this will be used a left-padding param
      SizedBox(width: 20.0),
      // using it here
      Icon(icon, size: 28.0, color: Colors.greenAccent),
      SizedBox(width: 5.0),
      // this will take the remaining space, and then center the child
      Expanded(child: Center(child: Text(text)))
    ]
  );

Для использования в основном виджете просто сделайте следующее:

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // calling our widget here
            myWidget('FirstText', Icons.alarm),
            SizedBox(height: 20.0), // this is used as a top margin
            myWidget('SecondText', Icons.notifications)
          ]
        )

Если хотите ознакомьтесь с источниками, которые я использовал, см .:

• Расширенный класс
• класс SizedBox

Результат будет следующий:

Результат