как пространственно дать изображение или текстовый фон на сложном экране

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

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

Answer 1

Виджет Column поверх Container переписывает свое обычное поведение на максимально возможное, и теперь он просто оборачивает его содержимое, как вы заметили. Вы можете задать 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),
        )
        ],
    ),
    ],
),