Как создать 2 кнопки подряд во Flutter?

Question

I really don not understand what wrong and how to fix it

I want to show 2 buttons on the screen in row

I have stateless widget MainPage:

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],
      ),
    );
  }
}

And I have 2 buttons: Person and History There is classes Person and History:

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          child: RaisedButton(
            child: Container(
              width: 100,
              height: 100,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Person"),
                  Icon(Icons.person)
                ],
              ),
            ),
          ),
        ),
    );
  }
}
class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

But I get an error: A RenderFlex overflowed by Infinity pixels on the right.Where am I wrong?

Answer 1

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

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

Проверьте следующую ручку, в ней не используются 2 каркаса, не так много контейнеров, и взгляните на строку mainAxisAlignmentсвойство https://codepen.io/ayRatul/pen/gOrXqMw

Также попробуйте заменить container с участием SizedBox, SizedBox работает хорошо, если вы используете только высоту и ширину;)

Изменить: если по какой-то странной причине вы все еще хотите сохранить исходный код, я бы использовал

Row(
     mainAxisSize:MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],

Answer 2

Вы не должны ставить Scaffoldвезде. Подробнее здесь: https://api.flutter.dev/flutter/material/Scaffold-class.html

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      child: Container(
        width: 100,
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("Person"), Icon(Icons.person)],
        ),
      ),
    );
  }
}

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      child: Container(
        width: 100,
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("History"), Icon(Icons.history)],
        ),
      ),
    );
  }
}

Answer 3

1. На каждом экране / странице должен быть только один каркас. (ссылка)
2. Таким образом переместите Scaffold с каждой кнопки на MainPage.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Person(),
            History()
          ],
        ),
      ),
    );
  }
}

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Container(
          width: 100,
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Person"),
              Icon(Icons.person)
            ],
          ),
        ),
      ),
    );
  }
}
class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      );
  }
}

Answer 4

Вы не должны гнездиться Scaffolds:

---

Почему ты должен гнездиться Scaffolds?

Scaffold был разработан как единый контейнер верхнего уровня для MaterialApp, и, как правило, нет необходимости вкладывать строительные леса, что означает, что должен быть один Scaffold для каждой страницы (точнее, для каждого маршрута / экрана),

---

ПЕРСОНАЛЬНЫЙ ВИДЖЕТ

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Container(
          width: 100,
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [Text("Person"), Icon(Icons.person)],
          ),
        ),
      ),
    );
  }
}

---

ИСТОРИЯ ВИДЖЕТ

class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text("History"), Icon(Icons.history)],
            ),
        ),
      ),
    );
  }
}

ВИДЖЕТ ГЛАВНОЙ СТРАНИЦЫ

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Person(), History()],
        ),
      ),
    );
  }
}

РЕЗУЛЬТАТ:

ПРИМЕЧАНИЕ. Есть некоторые улучшения, которые можно сделать на основе вышеизложенного: // 1. Вы должны удалить избыточный контейнер в примере виджета RaisedButton:

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: RaisedButton(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("Person"), Icon(Icons.person)],
        ),
      ),
    );
  }
}