《Flutter 项目工程化》第一章 起步

最新推荐文章于 2024-10-16 10:40:28 发布
最新推荐文章于 2024-10-16 10:40:28 发布
阅读量384 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flutter 项目工程化 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/geeksoarsky/article/details/118875306
本文介绍了Flutter项目工程化的起步，包括开发环境的配置，如VS Code和Android Studio，以及新建项目的步骤。详细讲解了使用Git进行版本控制，如设置用户信息、提交代码和版本回退。还提到了配置信息，尤其是pubspec.yaml文件的使用，如版本号管理和环境配置。此外，文章讨论了如何管理依赖和资源，以实现有效的项目管理。

第一章 起步

1.1 开发环境

对于开发，我们使用集成开发环境（IDE）– 使开发和测试变得轻松快捷。目前有2种流行的IDE：

  • VS Code –轻便，快速，你想要 IDE 拥有的功能它全都有 ！
  • Android Studio –使用设备上的Android Studio，您只需安装 Flutter 和 Dart 的插件，设置SDK，就可以了。

Flutter中文网有详细的开发环境搭建步骤，请跳转到 https://flutterchina.club/get-started/install

1.2 新建项目

Android Studio (图形化界面)

注意：项目名称 (Project name) 一般以 flutter_xxx 命名，组织名称 (Organization) 使用反域名

在这里插入图片描述

Git Bash 或 CMD (命令行界面)

进入指定目录后执行：


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                  
                    
                    超级会员免费看
                  
                

            
            
            
        


    



                



	

		

			

				
					
《Flutter 项目工程化》序言

				
			

			

				

					geeksoarsky的博客
				

				

					07-18
					
					491
					
				

			

		

		

			
				
序言
Flutter 项目工程化
《Flutter 项目工程化》一书是Flutter 快速开发实战专栏的上册，笔者以快速命名是因为 “完成要比完美更重要”，“快速推进，打破常规”，“天下武功，唯快不破”，对于如今迅猛发展的互联网，也是如此。要知道，用户多变，所以唯一能够抓住机会的办法就是快。
在互联网行业，要成就一个项目，idea 一文不值，不仅是在中国，在哪都一样。笔者希望读者通过《Flutter 项目工程化》这本书能把你的想法在技术层面上来讲从不可行到可行，提高你的执行力，最终做成一款好的APP。
由于

			
		

	



                

            
              



	

		

			

				
					
《Flutter 项目工程化》第五章 5.5 启动图标和应用名称

				
			

			

				

					geeksoarsky的博客
				

				

					07-19
					
					199
					
				

			

		

		

			
				
启动图标
安装 flutter_launcher_icons

pub.dev
Github

配置依赖 ，执行 flutter pub get
获取插件
pubspec.yaml
dependencies:
·
·
·
  flutter_native_splash: ^1.1.8+4
  flutter_launcher_icons: ^0.9.0

使用 flutter_launcher_icons
准备一张 1024x1024 格式的图片，位置 assets/icon/icon.png
pubspe

			
		

	



              


  
              

                


	

		

			

				
					
《Flutter 项目工程化》后记

				
			

			

				

					geeksoarsky的博客
				

				

					07-20
					
					217
					
				

			

		

		

			
				
后记
万丈高楼平地起，打好地基是重中之重。我们通过《Flutter 项目工程化》前四章的学习和实践就已经完成了 Flutter App 开发框架的搭建，这就好比参天大树有了主干，Flutter 快速开发实战专栏下册中的功能模块的实现只是添枝加叶，项目目录结构除特殊情况不会再发生变化。
下册《Flutter 实战开发旅行社交手机APP》内容预览：

首页布局，广场游记列表，上拉加载，下拉刷新；
游记详情页，点赞、收藏、评论游记；
发现页布局，仿抖音短视频功能的实现；
集成高德定位、高德地图、地图选点；
发布游

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第二章 2.4 导航栏

				
			

			

				

					geeksoarsky的博客
				

				

					07-18
					
					218
					
				

			

		

		

			
				
导航栏
我所设计的 App 应具有五大模块，动态页，发现页，地图页，消息页，我的页面，故导航条应有五项，用户点击某一个导航图标会自动加载该按钮对应的页面。
新建视图
新建 /page 目录，在该目录下新建 dynamic.dart、find.dart、map.dart、message.dart、mine.dart，如果你是 Linux 开发环境或者在 Git bash 环境下，可以使用如下命令快速新建目录和文件。
mkdir -p lib/page
cd lib/page/
touch dynamic.da

			
		

	



		

			
		



	

		

			

				
					
Flutter 工程化框架选择——搞定 Flutter 动画

				
			

			

				

					Dream It Possible
				

				

					11-28
					
					1551
					
				

			

		

		

			
				
在之前的Flutter 小技巧： 用于控制动画启动、暂停： 用于创建所需的vsync参数，一般最常使用Animation： 用于处理动画的 value ，例如常见的接收动画的对象：例如这种写法如下代码所示，我们一般可以称为显式动画（不要纠结名词叫法），大致特征就是：以 *Transition命名，比如、和等，需要我们自己定义和操作。);}}复制代码也就是开箱即用，常见是 Animated*开头的 Widget，例如、、、

			
		

	





	

		

			

				
					
给Android工程师的Flutter入门手册

				
			

			

				

					weixin_30146171的博客
				

				

					07-26
					
					110
					
				

			

		

		

			
				
前言这是笔者作为一个Android工程师入门Flutter的学习笔记，笔者不想通过一种循规蹈矩的方式来学习：先学Dart语言，然后学习Flutter的基本使用，再到实践应用这样的步骤。这样的方式有点无趣且效率较低。笔者觉得对于已经有Android基础的来说，通过类比Android的方式来学习Flutter，掌握核心基础概念...

			
		

	





	

		

			

				
					
flutter都出到3.X了，flutter会成为一片蓝海吗？

				
			

			

				

					weixin_37024291的博客
				

				

					08-20
					
					250
					
				

			

		

		

			
				
前言先说个人的看法和结论：在现如今众多的前端技术方案中，选择学习 Flutter 是一个明智的选择。谈谈我的几点理由：一、Flutter SDK 的版本号来到了 3.x，可以对 Windows、macOS 和 Linux 桌面环境提供正式支持。二、Flutter和平台原生的性能表现几乎没有差别，这一点是 React Nat...

			
		

	





	

		

			

				
					
看完227篇技术文，总结出一份 Flutter 入门教程

				
			

			

				

					2401_84132381的博客
				

				

					04-21
					
					1161
					
				

			

		

		

			
				
在这个网站中你必须看懂的是。为什么不用 Flutter 中文网？因为最新特性需要翻译，网站更新需要时间。如果你在官网学习如何安装 Flutter 遇到了问题，那么应该找学习一下前人的经验了。这篇文章讲解了如何在 Windows 上安装 Flutter SDK。希望给使用 Windows 作为开发机器的小伙伴一点帮助。如果你使用的是 Mac，这篇详细的教程可以帮到你。配置好基本环境以后，我们要学习的是 Flutter 的基本语法，内容包括：变量声明、数据类型、判断和循环条件等基础知识。

			
		

	





	

		

			

				
					
2024年Flutter从入门到精通全网最全学习路线指南

					
最新发布

				
			

			

				

					flutter开发app的博客
				

				

					10-16
					
					1492
					
				

			

		

		

			
				
我也面试过一些Flutter求职者，我一般从这几个方面提问，dart代码编写的设计思想与规范、dart异步模型与Flutter引擎原理、Flutter性能优化、Flutter状态管理与组件化开发、Flutter与原生结合部分的知识，譬如插件、原生通信、安卓基本常识、iOS基本常识。如果你想做Flutter，你可以从这几个方面好好的了解了解。布局原理与实践：通过学习Container、Row、Column、Stack、Flex等布局组件，掌握Flutter的响应式布局原理，并进行实际操作演练。

			
		

	





	

		

			

				
					
MPU9250编程起步：搭建开发环境与函数精讲

				
			

			

				

					
				

			

		

		

			
				
!... # 摘要 本文详细介绍了MPU9250多轴运动传感器的特性、应用场景及其在不同开发平台上的集成方法。首先，概述了MPU9250的基础知识和硬件连接方式，然后深入探讨了其核心功能编程，包括加速度计、陀螺仪、磁力计的...

			
		

	





	

		

			

				
					
android组件化架构pdf，app跨平台开发框架对比

				
			

			

				

					2401_84408418的博客
				

				

					04-22
					
					673
					
				

			

		

		

			
				
最后对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，

			
		

	





	

		

			

				
					
【空调遥控器项目大揭秘】：从电路设计到用户体验的全攻略

				
			

			

				

					
				

			

		

		

			
				
本论文详细探讨了空调遥控器项目的整个开发流程，涵盖电路设计、无线通信技术、软件界面设计以及用户体验等多个方面。首先介绍了电路设计的基础知识、电子元件的选择与应用，以及微控制器的编程。接着，深入分析了...

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第五章 5.4 隐私声明

				
			

			

				

					geeksoarsky的博客
				

				

					07-19
					
					847
					
				

			

		

		

			
				
隐私声明持久化存储状态管理视图演示版本提交
持久化存储
lib/utils/sputils.dart
///隐私
static void savePrivacy() {
  _spf!.setBool('key_privacy', true);
}
static void  clearPrivacy() {
  _spf!.remove('key_privacy');
}
static bool? getPrivacy() {
  return _spf!.getBool('key_privacy');
}

			
		

	





	

		

			

				
					
《Flutter 实战开发旅行社交手机APP》第二章 地图模块 2.1 Flutter 集成高德地图

				
			

			

				

					geeksoarsky的博客
				

				

					08-27
					
					1043
					
				

			

		

		

			
				
Flutter 集成高德地图安装依赖KEY创建应用调试版签名发布版签名高德地图添加 jar 文件：添加权限修改配置按需引入高德定位配置截图版本提交
安装依赖
安装高德定位 Flutter 插件，高德地图 Flutter 插件。定位和地图是分开的，不要混淆。
  amap_flutter_location: 2.0.0
  amap_flutter_map: 2.0.2

KEY
创建应用
根据插件Readme得知，我们需要前往高德地图开放平台 分别申请 Android 端和 iOS 端的 key。

调试版

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第三章 3.3 GetX 国际化

				
			

			

				

					geeksoarsky的博客
				

				

					07-18
					
					1018
					
				

			

		

		

			
				
3.3 GetX 国际化切换语言视图share_preferences 持久化存储Getx 状态管理切换语言测试版本提交
首先用户打开抽屉，再点击设置按钮跳转到设置页面，随后选择切换语言或主题。
切换语言视图
设置页面 settings.dart 代码如下：
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'language.dart';
class SettingsPage extends Sta

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第四章 4.2 登录注册

				
			

			

				

					geeksoarsky的博客
				

				

					07-19
					
					552
					
				

			

		

		

			
				
4.2 登录注册
手机号登录注册
客户端只需要提供手机号和验证码，服务端端检测是否注册，没注册则自动注册，故登录注册客户端实现起来只需要一个页面。
新建用户文件夹和用户注册文件
mkdir lib/page/User
touch lib/page/User/login.dart

验证码输入框插件 flutter_verification_box
依赖库
dependencies:
  ·
  ·
  ·

  flutter_spinkit: ^5.0.0
  flutter_verification_b

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第四章 4.1二次封装 Dio

				
			

			

				

					geeksoarsky的博客
				

				

					07-19
					
					542
					
				

			

		

		

			
				
第四章 用户相关
整个 App 是以用户为中心的，用户必须保持登录状态才能正常使用App，否则跳转到用户登录页。这是一个前后端完全分离的 App ,我已经搭建好了 Laravel API 服务器，使用 JWT 鉴权，即使用 Bear Token 确定用户身份，这就要求我们 App 在发起请求时附带 Token 值，如果 Token 过期但还在刷新周期内，则需要客户端自动刷新 Token , 我们将在此章节完成这些功能。
4.1 Dio 网络请求
安装 Dio

请安装好 Post Man 进行接口调试。



			
		

	





	

		

			

				
					
《Flutter 实战开发旅行社交手机APP》第一章 广场模块 1.1 游记列表

				
			

			

				

					geeksoarsky的博客
				

				

					08-18
					
					472
					
				

			

		

		

			
				
视图层
列表视图，包括上拉加载，下拉刷新，骨架装载器、自定义AppBar
视图
第三方库
包括上拉加载、下拉刷新 easyrefresh，skeleton 骨架加载器和支持空安全的 swiper 轮播图。
flutter_easyrefresh: ^2.2.1
skeleton_text: ^3.0.0
flutter_swiper_null_safety: ^1.0.2

基本视图
lib/page/Dynamic/Dynamic.dart
import 'package:flutter/material

			
		

	





	

		

			

				
					
《Flutter 项目工程化》第三章 3.2 GetX 路由管理

				
			

			

				

					geeksoarsky的博客
				

				

					07-18
					
					466
					
				

			

		

		

			
				
GetX 路由管理
路由管理
新建路由文件和路由表文件
mkdir lib/router
cd lib/router
touch router.dart router_map.dart

router_map.dart 定义了命名路由表
import 'package:flutter_locyin/menu/about.dart';
import 'package:flutter_locyin/menu/language.dart';
import 'package:flutter_locyin/menu/

			
		

	





	

		

			

				
					
Flutter团队协作中的组件化与工程化解决方案

				
			

			

				

					
				

			

		

		

			
				
1. **官方预构建zip包**：用户可以直接从Flutter官网下载包含基础API、Dart VM和Dart SDK在内的完整包，这是一种便捷的方法，但可能无法满足团队协作中的版本管理和自动化需求。  2. **源代码克隆与本地构建**：...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
geeksoarsky

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值