前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《《在Flutter和androidStudio中制作登录表单》》

《《在Flutter和androidStudio中制作登录表单》》

作者头像
徐建国
发布2021-08-03 15:10:57
2K0
发布2021-08-03 15:10:57
举报
文章被收录于专栏:个人路线个人路线

《在Flutter和androidStudio中制作登录表单》

在本教程中,我将向您展示如何在 Flutter 和 Android studio 中制作漂亮的登录表单, 您将学习如何制作背景图像、如何在 Flutter中制作圆形按钮、如何添加一些不透明度以及如何添加图标到您的文本字段。

代码语言:javascript
复制
import 'dart:ffi';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: LoginApp(),
));


class LoginApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                  image: NetworkImage('https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'),
              fit: BoxFit.fill
              ),
            ),
          ),
          Opacity(
            opacity: 0.5,
            child: Container(
              decoration: new BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [Colors.blue,Colors.purpleAccent],
                ),
              ),
            ),
          ),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Login',style: TextStyle(
                  fontSize: 60.0,
                  letterSpacing: 2.0,
                  color: Colors.white,
                  fontStyle: FontStyle.italic,
                ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 22.0),
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: InputBorder.none,
                      hintText: 'User Email',
                      contentPadding: EdgeInsets.all(16.0),
                      prefixIcon: Icon(Icons.email,color: Colors.blue,)
                    ),
                  keyboardType: TextInputType.emailAddress,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 12.0),
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: InputBorder.none,
                      hintText: 'User Password',
                      contentPadding: EdgeInsets.all(16.0),
                      prefixIcon: Icon(Icons.lock,color: Colors.blue,)
                    ),
                    obscureText: true,
                  ),
                ),
                Text("Forget your password ?", style: TextStyle(color: Colors.white),),
                SizedBox(
                  height: 40.0,
                ),
                RaisedButton(
                  onPressed: (){},
                  shape: StadiumBorder(),
                  color: Colors.blueAccent,
                  textColor: Colors.white,
                  child: Text("Login",style: TextStyle(fontSize: 22.0),),
                  padding: EdgeInsets.symmetric(vertical: 12.0,horizontal: 80.0),
                  elevation: 0.0,

                )
              ],
            ),
          )
        ],
      ),
    );
  }

}

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 明天也要加油呀 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档