dart - 如何在复杂屏幕中空间赋予图像或文本背景

Question

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

但我得到以下视图

下面是我的代码

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

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

标签： dartflutterflutter-layout

Answer 1

小Column部件Container覆盖其正常行为以尽可能大，现在它只是包装它的内容，就像您注意到的那样。您可以给Containera 高度property或将其包装在 a 中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),
        )
        ],
    ),
    ],
),