Как добавить более одного контейнера в макет страницы? - PullRequest
Новая
       14

Как добавить более одного контейнера в макет страницы?

0 голосов
/ 03 августа 2020

Итак, я новичок в трепетании или дротике. Я просмотрел много руководств, которые немного сложно выучить.

Мне нужно знать, могу ли я и как добавить во Flutter больше контейнеров, содержащих тексты или кнопки. Я создаю страницу входа в систему, на которой есть контейнер для некоторого текста и поля формы. Я хочу вставить второй контейнер, в который я могу вставить кнопку в нижней части входа в систему, в которой говорится, что «GET OTP» имеет максимальную ширину, предлагаемую дисплеем, как показано на изображении Страница входа . 

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

1 Ответ

0 голосов
/ 03 августа 2020

Одним из решений является использование виджета 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,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

Результат:

введите описание изображения здесь

...