问题
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