开发一个flutter app

news/2024/9/27 21:34:06

重新开启了flutter学习,因为一个大创项目

很对不起王建民主任,教导的软件需求知识,我完全没有用到。

首先配置环境 需要用android studio 自己用idea一直出错。所以一定要选择用android studio ,随便在网上找个教程就可以了

在android 中 build.gradle 添加以下代码 确保app启动慢的问题

    allprojects {repositories {google()mavenCentral()maven { url 'https://maven.aliyun.com/repository/google' }maven { url 'https://maven.aliyun.com/repository/jcenter' }maven { url 'https://maven.aliyun.com/repository/central' }maven { url 'https://storage.flutter-io.cn/download.flutter.io' }}}

  这次要开发完整的项目,要比之前难,而且界面必须美观,不能像之前一样了

 

根据登录界面来学习‘

import 'package:flutter/material.dart';
import 'register_page.dart';
import 'home_page.dart'; // 确保你已经导入了 HomePageclass LoginPage extends StatefulWidget {@override_LoginPageState createState() => _LoginPageState();
}class _LoginPageState extends State<LoginPage> {final TextEditingController _usernameController = TextEditingController();final TextEditingController _passwordController = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,body: SingleChildScrollView( // 添加可滚动视图
        child: Container(padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 20), // 防止键盘遮挡
          child: Column(children: <Widget>[Container(height: 400,decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/images/login/background.png'),fit: BoxFit.cover,),),child: Stack(children: <Widget>[Positioned(top: 50,left: 0,right: 0,child: Container(margin: EdgeInsets.only(top: 50),child: Text("登录", style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold)),),)],),),Padding(padding: EdgeInsets.all(30.0),child: Column(children: <Widget>[Container(padding: EdgeInsets.all(5.0),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Color.fromRGBO(143, 148, 251, 0.3),blurRadius: 20.0,offset: Offset(0, 10))]),child: Column(children: <Widget>[Container(padding: EdgeInsets.all(8.0),decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey)),),child: TextField(controller: _usernameController,decoration: InputDecoration(border: InputBorder.none,hintText: "请输入账号",hintStyle: TextStyle(color: Colors.grey[400]),),),),Container(padding: EdgeInsets.all(8.0),child: TextField(controller: _passwordController,decoration: InputDecoration(border: InputBorder.none,hintText: "请输入密码",hintStyle: TextStyle(color: Colors.grey[400]),),obscureText: true, // 隐藏密码
                            ),)],),),SizedBox(height: 30,),GestureDetector(onTap: () {_submitForm();},child: Container(height: 50,decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),gradient: LinearGradient(colors: [Color.fromRGBO(143, 148, 251, 1),Color.fromRGBO(143, 148, 251, 0.6),])),child: Center(child: Text("登录", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),),),),SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("没有账号?", style: TextStyle(color: Colors.black)),GestureDetector(onTap: () {Navigator.push(context, MaterialPageRoute(builder: (context) => RegisterPage()));},child: Text("注册", style: TextStyle(color: Color.fromRGBO(143, 148, 251, 1))),),],),],),)],),),),);}void _submitForm() {String username = _usernameController.text;String password = _passwordController.text;if (username == '123' && password == '123') {Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));} else {showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text("登录失败"),content: Text("用户名或密码错误"),actions: <Widget>[TextButton(child: Text("确定"),onPressed: () {Navigator.of(context).pop();},),],);},);}}
}

 目前也是开发了一个还算可以的页面,后续要和画师的风格通一,后续还要修改 这个页面仅供学习。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/65548.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

哔咔漫画最新版2024下载官网版-哔咔漫画2024最新版本永久免费v2.2.1.3-百步下载

哔咔漫画简介:在当今这个数字化日益发展的时代,二次元文化已经成为许多年轻人的精神食粮之一。哔咔漫画App,作为一款集成了大量正版漫画资源的移动应用,凭借其丰富的内容、优质的用户体验和便捷的操作方式,迅速成为了漫画爱好者们的首选平台。本文将带你深入了解哔咔漫画A…

『模拟赛』CSP-S模拟5

『模拟赛记录』CSP-S模拟5Rank 一般A. 光 胱! 妈的传奇题目控我两个小时想 \(\mathcal{O(1)}\) 做法。 其实带下取整的四个四元一次方程根本解不了,考虑到这个题给的范围只有 \(n\le 1500\),可以枚举两维剩下二分到一个小区间里去做,复杂度 \(\mathcal{O(n^2\log n)}\),当…

pbootcms自动生成当前页面二维码

在PbootCMS中,生成二维码标签可以帮助用户更方便地访问特定的页面或内容。下面详细介绍如何在首页、列表页和文章内容页生成二维码标签。 生成二维码标签的方法 PbootCMS 提供了 {pboot:qrcode} 标签来生成二维码图片。这个标签可以用于生成对应文本的二维码图片,适用于各种页…

PbootCMS模版制作:当天发布的文章显示红色的方法

在PbootCMS中,如果你想让当天发布的文章显示为红色,可以通过条件判断来实现这一功能。具体步骤如下: 实现步骤获取当前日期:获取当前日期,并将其格式化为 m-d 格式。比较发布日期:比较文章的发布日期与当前日期是否相同。设置样式:如果发布日期与当前日期相同,则设置文章标…

PBootCMS后台系统内容修改

apps/admin/view/default/system/home.html 可以修改后台首页服务器信息扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML…

征程 6E/M 快速上手实战 Sample-Camera

01 Camera 模块简述 本文档简单介绍 Camera 子系统软件架构、列出已支持的 Camera 模组,并提供相应的配置说明,同时引用 Sensor 点亮调试方法介绍一颗新模组接入的步骤,再按根据重要功能按专题介绍接入方案限制、EMB 接收等,并最终汇总平台已有单板的 Camera 接入使用说明,…

章15——泛型generic

泛型的引入泛型引入前后代码的比较 public static void main(String[] args) {ArrayList arrayList = new ArrayList();arrayList.add(new Dog("wang",10));arrayList.add(new Dog("xin",1));arrayList.add(new Dog("ran",5));//遍历for (Object…

QGIS 操作

qgis 两个shp 文件 合并 去重,导出新的shp qgis 导出shp