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

我与影子孤独终老i 提交于 2021-02-17 05:41:09

问题


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.


回答1:


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



回答2:


Put the bottom Container inside Align widget and use alignment: Alignment.bottomCenter .:

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

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



回答3:


Thanks @Zulfiqar But It is not necessary to put the whole view inside the Stack widget and use the Align property with it. We can also use the Expanded or flexible widget to come out from the problem.
We can also use the MediaQuery for it like below

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

           ],

         )

     ),
   );
  }
}

And for the pageView i have used this library page_indicator: ^0.3.0

And output from above code is as follow



来源:https://stackoverflow.com/questions/57357545/flutter-how-to-put-the-view-in-the-center-and-bottom-of-the-screen

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!