Блог

Я новичок в Flutter, я хотел бы создать это

Поэтому я создал два виджета, один с колонкой 1 и его дочерний с колонкой 2.

Проблема в том, что я получил эту ошибку «дно переполнено бесконечными пикселями», несмотря на заданные высоту и ширину.

Не могли бы вы мне помочь, пожалуйста ?

Родительский виджет:

 class LogingPage extends StatelessWidget {   @override  Widget build(BuildContext context){  var size = MediaQuery.of(context).size;   return Scaffold(  body: Container(  width: size.width,  height: size.height,  child: Column(  children: [  brandDisplayContent(),  //buttonsDisplayContent(),  ],  ),  ),  );  } }  

Дочерний виджет:

 class brandDisplayContent extends StatelessWidget {   @override  Widget build(BuildContext context){  var size = MediaQuery.of(context).size;   return Scaffold(  body: Container(  height: 450,  width: size.width,  padding: EdgeInsets.only(top:200),   color: Color.fromRGBO(132, 119, 240, 100),   child: Column(  mainAxisSize: MainAxisSize.max,  children: [  brandText(),  littleTitleText(),  ],  )  ),  );  } }  Text brandText(){  return Text(  "BRANDEE",  style: TextStyle(  color: Colors.white,  fontSize: 45,  letterSpacing: 8,  ),  textAlign: TextAlign.center,  ); }  Text littleTitleText(){  return Text(  "Play to rise",  style: TextStyle(  color: Colors.white,  fontSize: 18,  ),  textAlign: TextAlign.center,  ); }  

Другой подход заключается в том, чтобы рассмотреть возможность использования расширенного виджета внутри столбца. Таким образом, вам не нужно получать размер, а просто установите размер в виде пропорции, используя свойство Flex.

Пример, чтобы примерно показать аналогичную компоновку…

 return Scaffold(  body: Column(  crossAxisAlignment: CrossAxisAlignment.stretch,  children: [  Expanded(  flex: 3,  child: Container(  color: Colors.red,  child: Column(children: [  Expanded(  flex: 2,  child: Container(  color: Colors.red,  ),  ),  Expanded(  flex: 3,  child: Container(  color: Colors.yellow,  ),  ),  ]),  )),  Expanded(  flex: 2,  child: Container(  color: Colors.blue,  child: Column(  children: [  /// Repeat  ],  ),  ),  )  ],  ),  );   

Определите высоту в процентах height: size.height * .6

Смартфоны имеют разное разрешение, и в таких случаях не используют фиксированную высоту.

 @override Widget build(BuildContext context){  var size = MediaQuery.of(context).size;   return Scaffold(  body: Container(  height: size.height * .6,  width: size.width,  padding: EdgeInsets.only(top:200),   color: Color.fromRGBO(132, 119, 240, 100),   child: Column(  mainAxisSize: MainAxisSize.max,  children: [  brandText(),  littleTitleText(),  ],  )  ),  ); }  

и набор кнопок Displaycontent height: size.height * .4