Flutter 登录页面Demo 复制可使用

朴灿烈づ我的快乐病毒、 2023-10-07 18:07 18阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

--------------------

效果图如下：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_19_color_FFFFFF_t_70_g_se_x_16]

程序运行根目录

import 'dart:ui';
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() {
        
      runApp(MyApp());
    }
    
    /// 根目录 Activity  ViewController
    class MyApp extends StatelessWidget {
        
      @override
      Widget build(BuildContext context) {
        
        return const MaterialApp(
          home: MyHomePage(),
        );
      }

默认显示的首页面

///默认加载显示的首页面
    class MyHomePage extends StatefulWidget {
        
      const MyHomePage({
        Key? key}) : super(key: key);
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
        
      ///用户名使用
      late final TextEditingController _nameController = TextEditingController();
      ///密码输入框使用
      late final TextEditingController _passwordController =
          TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          body: Container(
            width: double.infinity,
            height: double.infinity,
            child: Stack(
              children: [
                //第一层 背景图片
                buildFunction1(),
                //第二层 高斯模糊
                buildFunction2(),
                //第三层 登录输入层
                buildFunction3(),
              ],
            ),
          ),
        );
      }
    ... ... 这里是相应的方法块
    }

显示的一个背景图

buildFunction1() {
        
        return Positioned.fill(
          child: Image.asset(
            "images/loginbg.png",
            fit: BoxFit.fill,
          ),
        );
      }

高斯模糊

buildFunction2() {
        
        return Positioned.fill(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: Container(
              color: Colors.white.withOpacity(0.4),
            ),
          ),
        );
      }

登录输入层

buildFunction3() {
        
        return Positioned.fill(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 300,
                child: TextField(
                  controller: _nameController,
                  decoration: const InputDecoration(
                    hintText: "请输入用户名",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(33)),
                      borderSide: BorderSide(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 20),
              SizedBox(
                width: 300,
                child: TextField(
                  controller: _passwordController,
                  decoration: const InputDecoration(
                    hintText: "请输入密码",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(33)),
                      borderSide: BorderSide(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 40),
              SizedBox(
                width: 300,
                height: 48,
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(33)),
                  child: ElevatedButton(
                    onPressed: () {
        
                      String name = _nameController.text;
                      String password = _passwordController.text;
    
                      print("获取到的内容是 $name  $password");
                    },
                    child: const Text("登录"),
                  ),
                ),
              )
            ],
          ),
        );
      }

--------------------

完毕

--------------------

小编也写了几本书，如果你有兴趣可以去看看

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/96a20a16e46f4430bd5547ff0cf93308.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_19,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center