Flutter：-如何将视图放置在屏幕的中央和底部？

Question

我正在创建教程屏幕，其中有两个视图，例如：-一个位于屏幕中央，另一个位于屏幕底部。

但是我的两种观点都不正确，请检查以下图像。我已经完成了一些代码行，但是没有得到正确的解决方案，请检查一下下面的代码一次

import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';

    import 'login_screen.dart';

    class Tutorial extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _TutorialScreen();
      }
    }

    class _TutorialScreen extends State<Tutorial> {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: Align(
            alignment: Alignment.center,
            child:Column(
              children: <Widget>[
                Container(
                  height: 250.0,
                  margin: EdgeInsets.only(left: 10.0,top: 40.0,right: 10.0),
                  child: PageIndicatorContainer(
                    pageView: PageView(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                        ),
                        Container(
                          color: Colors.yellow,
                        ),
                        Container(
                          color: Colors.blueAccent,
                        )
                      ],
                    ),
                    length: 3,
                    align: IndicatorAlign.bottom,
                    indicatorSpace: 5.0,
                    padding: EdgeInsets.all(10.0),
                  ),
                ),
                Container(
                  height: 80.0,
                  color: Colors.purple,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: OutlineButton(
                          onPressed: () {
                            Navigator.of(context)
                                .push(MaterialPageRoute(builder: (context) => LoginScreen()));

                          },
                          textColor: Colors.white,
                          child: Text(
                            "Login",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 10.0),
                        child: RaisedButton(
                          onPressed: () {},
                          color: Colors.black54,
                          child:
                          Text("SignUp", style: TextStyle(color: Colors.white)),
                        ),
                      ),
                    ],
                  ),
                )

              ],

            )

          ),
        );
      }
    }

请检查一下上面的代码一次，让我知道一次。

Answer 1

使用此获取所需的视图

Stack(children: <Widget>[
      Align(alignment: Alignment.center,
      child: Container(width: 100, height: 100, color: Colors.redAccent,),),
      Align(alignment: Alignment.bottomCenter,
      child: Container(height: 100, color: Colors.purpleAccent,),)
    ],)

Answer 2

将底部的Container放在Align小部件内并使用alignment: Alignment.bottomCenter。：

                Align(
                  alignment: Alignment.bottomCenter,
                    child: Container(
                    height: 80.0,
                    color: Colors.purple,
                    child: Row(

                    ... .... ... // other code