Как и в заголовке, вы можете видеть, что моя кнопка не занимает всю высоту строки. Синий цвет фона — это контейнер, который обертывает мою кнопку, чтобы визуализировать размер контейнера. Вы можете увидеть изображение без какого-либо цвета фона ниже. Я понятия не имею, что является причиной этого, не могу найти ответа в Интернете, поэтому публикую это здесь. Ниже приведен мой код и изображение. Спасибо за любую помощь.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: Container(
padding: EdgeInsets.all(16),
// color: Colors.redAccent,
child: Container(
// color: Colors.indigo,
child: Column(
children: [
Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 8, vertical: 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
hintText: 'Enter Match ID',
),
),
),
Container(
// color: Colors.blue,
padding: EdgeInsets.all(0),
margin: EdgeInsets.all(0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
// backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
onPressed: () => {},
child: Text("Scan Code")),
),
],
),
],
),
),
),
),
),
),
);
}
Крашу фон, чтобы изучить проблемуОригинальный
Я пробовал Expand, SizedBox, SizedBox.expand... но ничего не работает. Я думаю, проблема в самой кнопке, или, может быть, я еще не понимаю, что это за кнопка.
Это просто не так уж и высоко. Дочерние элементы строки по умолчанию не растягиваются на всю высоту. Для этого вы можете попробовать поставить Row
crossAxisAlignment: CrossAxisAlignment.stretch,
И удалите Контейнер, удерживая кнопку
растяните строку, используя CrossAxisAlignment.stretch
, чтобы высота всех дочерних элементов растянулась до самого высокого дочернего элемента
затем заверните строку, используя IntrinsicHeight
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 8, vertical: 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
hintText: 'Enter Match ID',
),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
// backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
onPressed: () => {},
child: Text("Scan Code")),
],
),
),
Спасибо, ваше решение мне подходит. Мне нужно прочитать больше об этом документе с макетами.
На самом деле мне нужно обернуть строку
IntrinsicHeight
, как в ответе @kezia-angeline. В противном случае выдаст ошибкуRenderBox was not laid out
.