短视频平台搭建,仿制一个登陆界面的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,更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现