Flutter :-如何将视图放在屏幕的中心和底部? [英] Flutter :-How to put the view in the Center and Bottom of the screen?

问题描述

我正在创建教程屏幕，其中两个视图如下:- 一个应位于屏幕中央，另一个应位于屏幕底部.

I am creating the tutorial screen in which the two views like:- one is should be in the center of the screen and another should at the bottom of the screen.

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

But my both view is not proper, please check the below images. I have done some lines of the code to do it but the not getting the proper solution, please check below code once

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

              ],

            )

          ),
        );
      }
    }

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

Please check above code once and let me know once.

推荐答案

使用它来获取所需的视图

Use this to get required view

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

这篇关于Flutter :-如何将视图放在屏幕的中心和底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！