Равномерно разделите экран на 4 части

Помогите мне, ребята, я новичок в разработке флаттера. Я пытаюсь сделать этот тип макета. вот макет, который я хотел, но получаю этот макет

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

Home.dart

class HomeScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        HomeScreen_Page homecreatestate() => HomeScreen_Page();
        return homecreatestate();
      }
    }

    class HomeScreen_Page extends State<HomeScreen> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new MaterialApp(
          home: new Scaffold(
            appBar: new AppBar(
              title: new Text('Home'),
              backgroundColor: primarycolor,
            ),
            drawer: new Drawer(
              child: new ListView(
                children: <Widget>[
                  new UserAccountsDrawerHeader(
                    accountName: new Text('Ayub Baba'),
                    accountEmail: new Text('[email protected]'),
                    currentAccountPicture: new CircleAvatar(
                      child: new Text(
                        'A',
                        style: new TextStyle(fontSize: 20.0, color: Colors.white),
                      ),
                      backgroundColor: secondarycolor,
                    ),
                    decoration: new BoxDecoration(color: primarycolor),
                  ),
                  new ListTile(
                    title: new Text('Profile'),
                    trailing: new Icon(Icons.account_circle),
                  ),
                  new ListTile(
                    title: new Text('Contact Us'),
                    trailing: new Icon(Icons.contact_mail),
                  ),
                  new ListTile(
                    title: new Text('Help'),
                    trailing: new Icon(Icons.help_outline),
                  ),
                  new ListTile(
                    trailing: new Icon(Icons.subdirectory_arrow_left),
                    title: new Text('LogOut'),
                  )
                ],
              ),
            ),
            body: new Builder(builder: (BuildContext context) {
              return new Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  new Image.asset(
                    'assets/bg.png',
                    fit: BoxFit.cover,
                  ),
                  new Center(
                    child:   new GridView.count(crossAxisCount: 2,
                      children: <Widget>[
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Send'),
                              new Text('(Send a courier)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Receive'),
                              new Text('(Track Your Courier)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Shopping'),
                              new Text('(Online Shopping)')
                            ],
                          ),
                        ),
                        new Center(
                          child: new Column(
                            children: <Widget>[
                              new Text('Payments Bills'),
                              new Text('(Eletricity,recharges etc)')
                            ],
                          ),
                        )
                      ],),
                  )

                ],
              );
            }),
          ),
        );
      }
    }

flutter dart flutter-layout
person ayub baba    schedule 21.06.2018    source источник
comment
Не могли бы вы указать, какая часть вашего кода не работает?   -  person creativecreatorormaybenot    schedule 21.06.2018

Ответы (2)


arrow_upward
13
arrow_downward

Есть несколько подходов. Вы можете сделать это с помощью Row / Column + crossAxisAlignment.stretch + Expanded

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.red,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellow,
            ),
          ),
        ],
      ),
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.purple,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.black,
            ),
          ),
        ],
      ),
    ),
  ],
);

Или с GridView и LayoutBuilder

return LayoutBuilder(
  builder: (context, constraint) {
    return new GridView.builder(
      itemCount: 4,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: constraint.maxWidth / constraint.maxHeight,
      ),
      itemBuilder: (context, index) {
        return Container(
          color: Colors.red,
          margin: EdgeInsets.all(4.0),
        );
      },
    );
  },
);
person Rémi Rousselet    schedule 21.06.2018
comment
Спасибо, что это сработало, но текст находится наверху, только мне нужно поместить его в центр - person ayub baba; 22.06.2018

arrow_upward
3
arrow_downward

Вы можете использовать GridView и установить crossAxisCount на 2. (См. Flutter)

new GridView.count(
    primary: false,
    padding: const EdgeInsets.all(20.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: <Widget>[
      const Text('He\'d have you all unravel at the'),
      const Text('Heed not the rabble'),
      const Text('Sound of screams but the'),
      const Text('Who scream'),
      const Text('Revolution is coming...'),
      const Text('Revolution, they...'),
    ],
  ),
person Bostrot    schedule 21.06.2018