短视频平台搭建,仿制一个登陆界面的demo

短视频平台搭建,仿制一个登陆界面的demo

程序运行根目录

 

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

​默认显示的首页面

 

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

显示的一个背景图

 

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

高斯模糊

 

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

登录输入层

 

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

 

以上就是 短视频平台搭建,仿制一个登陆界面的demo,更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(53)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示