首页 > 其他分享 >开发一个flutter app

开发一个flutter app

时间:2024-09-27 21:23:17浏览次数:10  
标签:Container color app maven Colors 开发 context child flutter

重新开启了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'; // 确保你已经导入了 HomePage

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget 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();
                },
              ),
            ],
          );
        },
      );
    }
  }
}

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

 

标签:Container,color,app,maven,Colors,开发,context,child,flutter
From: https://www.cnblogs.com/youxiandechilun/p/18436600

相关文章

  • MapBox Android版开发 6 关于Logo
    MapBoxAndroid版开发6关于LogoLogo的显示查看源码及思路(Logo)第一步第二步隐藏Logo示例查看源码及思路(Info)第一步第二步隐藏Logo和Info示例看到有网友留言问如何移除Logo,今天看了下V9源码,发现MapBox提供了禁用Logo的功能。先简单说下思路部分源码,最后是示例。L......
  • 深度讲解-APP安全评估报告(APP上架必备)
    随着《具有舆论属性或社会动员能力的互联网信息服务安全评估规定》(以下简称《评估规定》)的发布,互联网信息服务提供者在开展具有舆论属性或社会动员能力的App服务时,必须遵循相应的安全评估流程。以下是详细的App安全评估申请流程,帮助您顺利完成评估,确保应用合规与安全。什么类......
  • 基于Python+Vue开发的旅游景区管理系统
    项目简介该项目是基于Python+Vue开发的旅游景区管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的旅游景区管理系统项目,大学生可以在实践中学习和提升自己的......
  • 基于Java+Springboot+Vue开发的健身房管理系统源码+参考文章1.3万字
    项目简介该项目是基于Java+Springboot+Vue开发的健身房管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的健身房管理系统项目,大学生可以在实践中学习和提升......
  • 基于Java+Springboot+Vue开发的家具管理系统源码+开发文档
    项目简介该项目是基于Java+Springboot+Vue开发的家具管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的家具管理系统项目,大学生可以在实践中学习和提升自己......
  • 基于Java+Springboot+Vue开发的网上商城管理系统源码+文章
    项目简介该项目是基于Java+Springboot+Vue开发的网上商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的网上商城管理系统项目,大学生可以在实践中学习和......
  • 基于Python+Vue开发的医院门诊预约挂号系统
    项目简介该项目是基于Python+Vue开发的医院门诊预约挂号系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的医院门诊预约挂号管理系统项目,大学生可以在实践中学习......
  • 基于Java+Springboot+Vue开发的医院门诊预约挂号系统源码+参考文章1.2万字
    项目简介该项目是基于Java+Springboot+Vue开发的医院门诊预约挂号系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的门诊预约挂号管理系统项目,大学生可以在实践......
  • Vue 工程化开发入门
    文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域,Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目,提高开发效率和代码质量。本文将带你了解V......
  • uniapp开发——使用uni.chooseImage调用摄像头功能
    1.前端调用代码://获取摄像头权限失败的处理asyncfunctionrequestAndroidPermission(permisionID){varresult=awaitpermision.requestAndroidPermission(permisionID)if(result==-1){//被永久拒绝权限"letmsg='您还没有开启摄像头权限,无法拍照,是......