如何在复杂屏幕中给图片或文字背景留空间

Question

你好朋友我需要开发这样的屏幕

但是我在视图下方我尝试了扩展但变化不同请帮助朋友我是 flutter 的新手我不知道如何实现所需的布局

下面是我的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'ColorsPage.dart';

void main() => runApp(new Login());

class Login extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    Login_State login_state() => Login_State();
    return login_state();
  }
}

class Login_State extends State<Login>{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Builder(builder: (BuildContext context){
          return new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Container(
                  child: new Image.asset('assets/rural_post_logo.png'),
                decoration: new BoxDecoration(
                  color: Colors.white
                ),
                alignment: Alignment(0.0, -1.0),
              ),
              new Container(
                child: new Text('SIGN IN',style: new TextStyle(
                  color: Colors.white
                ),),
                decoration: new BoxDecoration(
                  color: secondarycolor
                ),
                alignment: Alignment(0.0, -1.0),
              ),
              new Container(
                child: new Text('SIGN UP',style: new TextStyle(
                  color: Colors.white
                ),),
                decoration: new BoxDecoration(
                  color: primarycolor
                ),
                alignment: Alignment(0.0, -1.0),
              )

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

Answer 1

Container 上的 Column 小部件覆盖了它的正常行为，使其尽可能大，现在它只是像您注意到的那样包装它的内容。您可以给 Container 一个高度 property 或将其包裹在 Padding:

Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
    Padding(
        padding: const EdgeInsets.all(70.0),
        child: 
          new Container(
              child: new Image.asset('assets/rural_post_logo.png'),
            decoration: new BoxDecoration(
              color: Colors.white
            ),
            alignment: Alignment(0.0, -1.0),
          ),
    ),
    new Column(
        children: <Widget>[
        new Container(
            child: Padding(
            padding: const EdgeInsets.all(80.0),
            child: new Text(
                'SIGN IN',
                style: new TextStyle(color: Colors.white),
            ),
            ),
            decoration: new BoxDecoration(color: secondarycolor),
            alignment: Alignment(0.0, -1.0),
        ),
        new Container(
            child: Padding(
            padding: const EdgeInsets.all(80.0),
            child: new Text(
                'SIGN UP',
                style: new TextStyle(color: Colors.white),
            ),
            ),
            decoration: new BoxDecoration(color: primarycolor),
            alignment: Alignment(0.0, -1.0),
        )
        ],
    ),
    ],
),

如何在复杂屏幕中给图片或文字背景留空间

how to spacely give the image or text background in complex screen

dart

flutter

flutter-layout