美文网首页
Flutter-登陆页面

Flutter-登陆页面

作者: 秋分落叶 | 来源:发表于2019-04-04 15:03 被阅读0次

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {

      // This widget is the root of your application.

      @override

      Widget build(BuildContext context) {

        return MaterialApp(

          home: MyHomePage(),

        );

      }

    }

    class MyHomePage extends StatefulWidget {

      @override

      _MyHomePageState createState() => _MyHomePageState();

    }

    class _MyHomePageState extends State<MyHomePage>

        with SingleTickerProviderStateMixin {

      AnimationController _animationController;

      Animation _animation;

      GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

      String _name;

      String _password;

      @override

      void initState() {

        super.initState();

        _animationController = AnimationController(

            vsync: this, duration: Duration(milliseconds: 1000));

        _animation =

            CurvedAnimation(curve: Curves.easeInOut, parent: _animationController);

        _animation.addListener(() => setState(() {}));

        _animationController.forward();

      }

      @override

      Widget build(BuildContext context) {

        return Scaffold(

            body: Stack(

          fit: StackFit.expand,

          children: <Widget>[

            Image.network(

              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554361176515&di=9241aeb8f6f657244334a295e2d5d08f&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh21%2Fh58%2Fimg_localize_343bc043c369b3ade96ea7f707fde2ec_400x400.png',

              fit: BoxFit.cover,

              color: Colors.black87,

              colorBlendMode: BlendMode.darken,

            ),

            Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: <Widget>[

                FlutterLogo(

                  size: _animation.value * 100,

                ),

                Form(

                  key: _formKey,

                  child: Theme(

                    data: ThemeData(

                        brightness: Brightness.dark,

                        primarySwatch: Colors.teal,

                        inputDecorationTheme: InputDecorationTheme(

                            labelStyle: TextStyle(

                          color: Colors.teal,

                          fontSize: 20,

                        ))),

                    child: Container(

                      padding: EdgeInsets.all(40),

                      child: Column(

                        children: <Widget>[

                          TextFormField(

                            decoration: InputDecoration(

                              // hintText: '输入邮箱',

                              labelText: '输入邮箱',

                            ),

                            keyboardType: TextInputType.emailAddress,

                            autofocus: true,

                            onSaved: (val) {

                              _name = val;

                            },

                          ),

                          TextFormField(

                            decoration: InputDecoration(

                              // hintText: '输入密码',

                              labelText: '输入密码',

                            ),

                            keyboardType: TextInputType.phone,

                            obscureText: true,

                            validator: (val) {

                              return val.length < 4 ? "密码长度错误" : null;

                            },

                            onSaved: (val) {

                              _password = val;

                            },

                          ),

                          Padding(

                            padding: EdgeInsets.only(top: 20),

                          ),

                          MaterialButton(

                            height: 40,

                            minWidth: 100,

                            color: Colors.teal,

                            textColor: Colors.white,

                            child: Text('登 录'),

                            onPressed: _forSubmitted,

                            splashColor: Colors.red,

                          )

                        ],

                      ),

                    ),

                  ),

                )

              ],

            )

          ],

        ));

      }

      void _forSubmitted() {

        var _form = _formKey.currentState;

        if (_form.validate()) {

          _form.save();

          print(_name);

          print(_password);

        }

      }

    }

    相关文章

      网友评论

          本文标题:Flutter-登陆页面

          本文链接:https://www.haomeiwen.com/subject/qjzfiqtx.html