Question

所以，我真的很陌生或飞镖。我看了很多教程，有点难学。

我需要知道是否可以，如何在Flutter中添加更多包含“文本”或“按钮”的容器。我正在建立一个登录页面，其中包含一些文本和表单字段的容器。我想插入第二个容器，在我可以在登录底部插入一个按钮的地方，上面写着“获取OTP”具有显示屏提供的最大宽度，如图Login Page所示。

 import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    class LoginPage extends StatefulWidget {
       @override
       LoginPageState createState() => LoginPageState();
    }
    class LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
              child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 180.0,),
                Padding(padding: EdgeInsets.all(10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Lets Start With Your', style: GoogleFonts.yantramanav(fontSize: 26.0, fontWeight: FontWeight.w300, textStyle: TextStyle(color: Colors.indigo[900])),),
                    Text('Phone / Email', style: GoogleFonts.robotoCondensed(fontSize: 50.0, fontWeight: FontWeight.w700, textStyle: TextStyle(color: Colors.indigo[900])),),
                    Padding(padding: EdgeInsets.only(top: 20.0),
                    child: TextFormField(
                        decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Enter phone number/email id',
                        hintText: 'Enter phone number/email id',
                    )
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 170.0),
                      child: Center(
                      child: Column(children: <Widget>[
                        OutlineButton(onPressed: () {}, child: Text('Skip Login', style: TextStyle(color: Colors.grey[500] ),),
                        borderSide: BorderSide( color: Colors.grey[300], width: 2.0,),
                        ),
                     ],),), ) ,
                     ],
                )
                )
              ]
            )
          ),
          **# I want to add a container (to insert a button with full width of the display) here**
          ],)
        );
      }
    }

Answer 1

解决方案之一是使用Stack小部件，这给您很大的自由来放置小部件：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(...), //your first container
        Positioned( //used to position the given child
          bottom: 0,
          child: GestureDetector(
            onTap: () {
              //here what you want to do when the user press the button
            },
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              width: MediaQuery.of(context).size.width, //to give the container the width of the screen
              child: Text(
                'GET OTP',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                ),
              ),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.purple,
                    Colors.blue,        //Linear Gradient with 3 colors
                    Colors.blue[800],
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

结果：

如何在页面布局中添加多个容器？

1 个答案: