Блог

Я хочу создать этот макет в flutter:

Макет

Он состоит из пяти кнопок, в которых пятая кнопка находится посередине остальных четырех и создает иллюзию, что остальные кнопки не являются прямоугольниками.

Возможно ли это вообще в flutter? Приветствуются некоторые рекомендации.

Спасибо.

Вы можете сделать это с помощью Stack виджета, чтобы расположить кнопку круга в центре.

Это пример, который я сделал:

     @override
    Widget build(BuildContext context) {
      return new Scaffold(
        backgroundColor: Colors.grey[800],
        body: Center(
          child: Stack(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      MyButton(),
                      MyButton(),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      MyButton(),
                      MyButton(),
                    ],
                  ),
                ],
              ),
              Center(
                child: MyCircleButton(),
              ),
            ],
          ),
        ),
      );
    }
  }

  class MyButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 120,
        margin: EdgeInsets.all(5),
        height: 120,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {
              print("On click");
            },
          ),
        ),
      );
    }
  }

  class MyCircleButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(60.0)),
        child: Container(
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              highlightColor: Colors.red,
              onTap: () {
                print("On circle click");
              },
            ),
          ),
        ),
      );
    }
  }
 

Попробуйте прочитать больше о макетах Flutter, здесь у вас есть много информации: https://flutter.dev/docs/development/ui/layout