Button_Alignment и положение - PullRequest
       37

Button_Alignment и положение

0 голосов
/ 19 октября 2019

Привет всем, пожалуйста, помогите мне. я хочу сделать страницу регистрации флаттера (рисунок дизайна дан ниже). я кодирую столько, сколько знаю. Если я делаю что-то еще, то это идет не так (мой код и скриншот с результатами приложения также приведены ниже). так скажите мне, что я делаю в коде для выравнивания кнопки. просто скажите, как выравнивание / размещение будет

enter image description here

enter image description here

enter image description here

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Travel Budget App",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: FirstView(),
    );
  }
}
class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
         alignment: Alignment.bottomCenter,
         child: Padding(
          padding: const EdgeInsets.only(bottom: 100),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
              RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.only(
                      top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
                ),
                onPressed: () {},
              ),
              RaisedButton(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0)),
                child: Padding(
                  padding: const EdgeInsets.only(
                      top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
                ),
                onPressed: () {},
              ),
            ],
          ),
        ),
      )
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 19 октября 2019

Как упомянул @ saiful-islam-adar, есть несколько способов добиться этого, я использовал spacer

class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 10.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  RoundedButton(
                      color: Colors.white, text: 'Login', onPressed: () {}),
                ],
              ),
              Spacer(),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  RoundedButton(
                      color: Colors.white, text: 'E-mail', onPressed: () {}),
                  SizedBox(
                    height: 10,
                  ),
                  RoundedButton(
                      color: Colors.white, text: 'Facebook', onPressed: () {}),
                ],
              ),
            ],
          ),
        ));
  }
}
0 голосов
/ 19 октября 2019

Есть несколько способов сделать это.

Использование стека: Эшафот -> Стек -> [Позиционировано (вверху: 8, справа: 8), Колонка -> [Raisedbutton1, RaisedButton2]]

Использование столбца Эшафот -> Столбец-> [Выровнять (Aligment: Alignment.centerRight), Spacer (), RaisedButton1, RaisedButton2]

Читать оСтек и позиционированный виджет, если вы не понимаете первый вариант. Надеюсь, это поможет:)

...