Как реализовать коробки, которые заполняют экран, и я не вижу свой ящик

Question

Я пытаюсь реализовать дизайн пользовательского интерфейса, что-то вроде этого:

И это то, чего я достиг до сих пор:

Я застрял на этапе заполнения экрана ящиками, я пытался реализовать это несколькими способами (расширенные, контейнеры и т. Д.), Но в результатене удовлетворил меняКак мне это реализовать?

И у меня также есть другая проблема, когда я создаю ящик, он работает (я могу прокрутить экран вправо и появится экран навигации ящика), но я не вижузначок ящика.

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

Мой код:

 class Sample extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
      drawer: Drawer(),
body: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Container(
                    height: MediaQuery.of(context).size.height / 2,
                    width: double.infinity,
                    color: Color.fromRGBO(50, 50, 205, 1),
                  ),
                  Opacity(
                    child: Image.network(
                      'https://cdn.pixabay.com/photo/2015/04/23/21/36/auto-736794__340.jpg',
                      //half of the screen
                      height: MediaQuery.of(context).size.height / 2,
                      fit: BoxFit.cover,
                    ),
                    opacity: 0.3,
                  ),
                  SafeArea(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(bottom: 58.0),
                          child: Text(
                            'Parking App',
                            style: TextStyle(color: Colors.white, fontSize: 20.0),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

            ],
          ),
        );
      }
    }

Answer 1

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

import 'package:flutter/material.dart';

class SamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Column(
        children: <Widget>[
          Image.network(
            "http://i63.tinypic.com/16p2xu.jpg",
            fit: BoxFit.cover,
            height: screenHeight / 2,
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(Icons.account_balance),
                            SizedBox(height: 10),
                            Text("My Stats"),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Container(
                          color: Colors.indigo,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              Icon(Icons.accessibility, color: Colors.white),
                              SizedBox(height: 10),
                              Center(
                                child: Text(
                                  "Component",
                                  style: TextStyle(color: Colors.white),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.cyanAccent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.access_alarm),
                        SizedBox(height: 20),
                        Text("Workout"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Результат:

Answer 2

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

Примечание: убедитесь, что вы используете полноэкранный режим с контентом, иначе будет черный экран.

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height / 2,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Color.fromRGBO(50, 50, 205, 0.3),
                image: DecorationImage(
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2015/04/23/21/36/auto-736794__340.jpg',
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          drawer: Drawer(),
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            title: new Text("Demo"),
            centerTitle: true,
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: Center(
                  child: new Container(
                    decoration: BoxDecoration(
                      color: Colors.red
                    ),
                    child: new Text("book"),
                  ),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}