dart - 如何用 Flutter 实现这种布局

Question

我完全不知道如何创建这个布局：

我的代码：

import 'package:flutter/material.dart';

class SignupScreen extends StatefulWidget {
  final _username, _email, _password;

  @override
  _SignupScreenState createState() => new _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new TextField(
                keyboardType: TextInputType.emailAddress,
                decoration: new InputDecoration(
                  hintText: 'Email'
                )
              ),
              new TextField(
                obscureText: true,
                decoration: new InputDecoration(
                  hintText: 'Password'
                )
              ),
              new RaisedButton(
                onPressed: () {},
                child: new Text('Sign In')
              ),
              new FlatButton(
                onPressed: () {},
                child: new Text('Sign Up')
              ),
            ],
          )
        )
      )
    );
  }
}

结果：

我如何FlatButton在屏幕底部找到它？

标签： dartflutter

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(
      new MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new HomePage(),
      ),
    );

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Padding(
        padding: const EdgeInsets.all(15.0),
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(labelText: 'Username'),
                  ),
                  new TextField(
                    decoration: new InputDecoration(labelText: 'Password'),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 10.0),
                    width: double.infinity,
                    child: new RaisedButton(
                      onPressed: () {},
                      child: new Text('Login'),
                    ),
                  ),
                ],
              ),
            ),
            new Container(
              width: double.infinity,
              child: new RaisedButton(
                onPressed: () {},
                child: new Text('Register'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

希望这可以帮助！