如何实现填满屏幕的盒子&我看不到我的抽屉答案

【问题标题】：How to implement boxes that fill the screen & I dont see my drawer如何实现填满屏幕的盒子&我看不到我的抽屉
【发布时间】：2019-09-07 23:29:55
【问题描述】：

我正在尝试实现一个 UI 设计，如下所示：

这就是我目前所取得的成就：

我陷入了用盒子填充屏幕的阶段，我尝试通过多种方式（扩展、容器等）实现这一点，但结果并不让我满意。我该如何实现？

我还有另一个问题，当我创建抽屉时它可以工作（我可以向右滚动屏幕并出现抽屉导航屏幕），但我看不到抽屉图标。

顺便说一句，如果你有改进代码的建议或者我可以写得更好的东西，我会很高兴听到这个

我的代码：

 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),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

            ],
          ),
        );
      }
    }

【问题讨论】：

你试过行列吗？
@Meysam 当然，我尝试在行和列中扩展容器，但效果不佳

标签： dart flutter flutter-layout

【解决方案1】：

您可以使用堆栈实现类似的布局。我演示如下。

注意：确保您使用全屏显示内容，否则会出现黑屏。

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"),
                  ),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}

【讨论】：

【解决方案2】：

可能有更好的方法来实现这一点，但这里是行和列的解决方案：

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"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

结果：

【讨论】：