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

Answer 3

谢谢 @Zulfiqar 但是没有必要将整个视图放在 Stack 小部件中并使用 Align属性用它。我们也可以使用 Expanded 或 flexible 小部件来解决问题。
我们也可以像下面这样使用 MediaQuery

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

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

class _HomeScreen extends State<HomeScreen> {


  @override
  void initState() {
    // TODO: implement initState

    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return Material(
     child:Align(
         alignment: Alignment.center,
         child:Column(
           children: <Widget>[
             Container(
               height: MediaQuery.of(context).size.height*0.90,  /////HERE I USED MEDIAQUERY FOR IT
               child: PageIndicatorContainer(
                 child: 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: MediaQuery.of(context).size.height*0.10, ////HERE I USED MEDIAQUERY FOR IT
               color: Colors.purple,
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Container(
                     child: OutlineButton(
                       onPressed: () {

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

           ],

         )

     ),
   );
  }
}

对于 pageView 我使用了这个库 page_indicator: ^0.3.0

上面代码的输出如下

Flutter :-如何将视图放在屏幕的中心和底部？

Flutter :-How to put the view in the Center and Bottom of the screen?

flutter

flutter-dependencies

flutter-layout