Как выровнять дочерний элемент FlatButton
Я пытаюсь выровнять 2 текста и изображение как дочерний элемент FlatButton (так), но почему-то элементы не выравниваются должным образом.
Я пытался использовать Stack, Align, Rows и т. д., но мне это не очень удалось (я также новичок, когда дело доходит до дротика или флаттера).
new ButtonTheme(
minWidth: 171,
height: 176,
child:new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(19),
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF8F94FB),
Color(0xFF5D62D4)
]
)
),
child: FlatButton(
onPressed: () => handleButtonClick(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
)
],
),
),
),
),
Вот результат:Изображение
Ответы 2
Вы можете отлаживать шаг за шагом. Во-первых, это метод, который я использую со мной и другими моими коллегами-разработчиками. В дочернем параметре передайте Container, этот контейнер получит цвет, например Colors.red, с помощью которого вы можете увидеть, какой размер содержит область вашего контейнера.
После этого, если вы хотите централизовать содержимое внутри этого Container, передать Center как дочерний элемент и дочерний элемент этого виджета Center, вы можете передать свое изображение и определить размер этого изображения.
child: Container(
color: Colors.red,
child: Center(
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
),
),
Скажите, сработало ли это для вас.
Спасибо. Эта техника с красным цветом бесценна!!
Ха-ха, это мой секрет при создании пользовательского интерфейса: всегда передавать цвет, чтобы увидеть, где что находится.
Замените свой FlatButton приведенным ниже кодом и посмотрите, работает ли он для вас.
FlatButton(
padding: const EdgeInsets.all(0),
onPressed: () => {
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Container(
width: 109,
height: 109,
child: Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
),
),
],
),
),
просто установка заполнения на ноль решила мою проблему
попробуйте добавить дополнение: const EdgetInset.all(0) к FlatButton