Блог

Это код:

 Row(
children: [
GestureDetector(
....
child: RoundIconBtnPlus(
          icon: new IconButton(
           icon: new Icon(
           FontAwesome.plus,
                           ),
           iconSize: 30.ssp,
                           )
                         ))])
 

Здесь я объявил RoundIconBtnPlus

 class RoundIconBtnPlus extends StatelessWidget {
  RoundIconBtnPlus({@required this.icon});

  final IconButton icon;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: IconButton(
        icon: new Icon(
            FontAwesome.plus,
            color: Colors.white
        ),
      ),
      shape: CircleBorder(),
      fillColor: HexColor("#4c4f5e"),
    );
  }
}
 

Это ошибка, которую я получил:

Код ошибки

 ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═══════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 21 pixels on the right.
The relevant error-causing widget was:
  Row file:///C:/app_name/lib/ui_screen/HomeScreen.dart:147:35
The overflowing RenderFlex has an orientation of Axis.horizontal.
The specific RenderFlex in question is: RenderFlex#30a0f relayoutBoundary=up1 OVERFLOWING:
  needs compositing
  creator: Row ← Column ← DecoratedBox ← ConstrainedBox ← Padding ← Container ← Padding ← Row ← Column
    ← Row ← ConstrainedBox ← Container ← ⋯
  parentData: offset=Offset(0.0, 76.0); flex=null; fit=null (can use size)
  constraints: BoxConstraints(0.0<=w<=154.8, 0.0<=h<=Infinity)
  size: Size(154.8, 48.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 21 pixels on the right.
 

Я попытался обернуть RoundIconBtnPlus в гибкий виджет, а также попытался добавить отступы в IconButton и RoundIconBtnPlus, переключаемые с помощью свойства mainAxisAlignment, но пока безуспешно. Пожалуйста, изучите это.

Это пример того, как это сделать :

 class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: [
      Text("Age"),
      Text("20"),
      Row(children: [
        Flexible(child: _iconButton()),
        Flexible(child: _iconButton()),
      ])
    ]), color: Colors.green, width: 100);
  }

  Widget _iconButton() {
    return RawMaterialButton(
        child: IconButton(
          icon: Icon(Icons.add, color: Colors.white),
        ),
        shape: CircleBorder(),
        fillColor: Colors.red,
        onPressed: () {
          print("onPressed");
        });
  }
}
 

Ключ в том, чтобы обернуть прямые дочерние элементы виджета строки в гибкие (или расширенные) виджеты.

Вы также должны использовать свойство onPressed для IconButton (и вам, вероятно, не нужно добавлять GestureDetector выше), но я предполагаю, что ваш виджет RoundIconBtnPlus не завершен.

Это макет, который, я думаю, вы пытаетесь создать. красный — это строка, в которой расположены 2 кнопки. чтобы выровнять и выровнять дочерние элементы внутри вашего виджета строк, вы можете использовать,

 mainAxisAligment: MainAxisAligment.spaceEvenly,
 

существуют и другие типы выравнивания, такие как, пробел, начало, конец, центр.

этот макет,

 Container->Colum [Text, Text, Row[child,child]]