源码分享-一个帮助flutter开发者快速上手的app

简介: 源码分享-一个帮助flutter开发者快速上手的app

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter接触时间不长,也就是刚刚到门口,还不算入门,由于国内的资料相对较少,官网又有时打不开,所有自己从头搭建了个基础框架,把常用的Widget组件的构造函数及常用属性做了简单的整理,方便后期查找。同时由于是业余时间在更新,所以现在只更新了60多种Widget的用法,后期还在更新。

1.显示效果

1 主结构

image.png

2 组件

image.png

2.已添加Widget组件

1 基础组件

Container、Row、Column、Image、Text、Icon、RaisedButton、Scaffold、Appbar、FlutterLogo、Placeholder

2 Material Components

BottomNavigationBar、TabBar、TabBarView、MaterialApp、WidgetsApp、Drawer、FloatingActionButton、FlatButton、IconButton、PopupMenuButton、ButtonBar、TextField、Checkbox、Radio、Switch、Slider、SimpleDialog、BottomSheet、ExpansionPanel、SnackBar、Chip、Tooltip、DataTable、Card、LinearProgressIndicator、ListTile、Stepper、Divider

3 Cupertino(iOS风格的widget)

CupertinoActivityIndicator、CupertinoAlertDialog、CupertinoButton、CupertinoSlider、CupertinoSwitch、CupertinoFullscreenDialogTransition、CupertinoNavigationBar、CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView

4 Layout

Padding、Center、Align、FittedBox、AspectRatio、Baseline、FractionallySizedBox、LimitedBox、Offstage、OverflowBox、SizedBox、SizedOverflowBox、Transform

3.目录结构

├─.dart_tool
├─.idea
├─android       # Android原生与flutter交互代码
├─build         # 项目编译目录
├─images        # 项目上没用,主要用在gitee上
├─ios           # ios原生与Flutter交互代码
├─lib           # Flutter原生代码
│  ├─assets     # 静态资源目录
│  │  ├─icon    # 小图标目录
│  │  ├─sample  # 组件里面用到的放在这里
│  │  └─tabbar  # tabbar小图标
│  ├─components # 组件目录,暂时没用到
│  ├─json       # json文件
│  ├─markdown   # 组件markdown介绍
│  ├─routers    # 路由
│  ├─utils      # 公用方法
│  └─views      # 组件目录
│      └─List   # 组件列表目录
│─test          # 测试代码
└─pubspec.yaml  # 第三方库及资源配置文件

复制

4.运行项目

## 查看版本号
flutter --version
## 检查开发环境是
flutter doctor
## 下载依赖
flutter packages get
## 运行项目
flutter run

复制

上面这些是基于你本机已经安装Flutter并已经正常配置开发环境的前提下,然后clone代码并运行项目,如果本机未配置开发环境,或者配置开发环境过程中有问题,可以下方留言,有时间我会在编写一篇配置开发环境过程的文章。

5.获取源码

源码不上传网盘了,需要源码的可以去gitee上下载zip压缩包或者clone源码,因为源码可能在不定期更新,增加Widget。地址:

https://gitee.com/nmgwap/flutter_app

相关文章
|
13天前
|
监控 安全 开发者
山东布谷科技:关于直播源码|语音源码|一对一直播源码提交App Store的流程及重构经验
分享提交直播源码,一对一直播源码,语音源码到Appstore的重构经验!
|
15天前
|
NoSQL 应用服务中间件 PHP
布谷一对一直播源码服务器环境配置及app功能
一对一直播源码阿里云服务器环境配置及要求
|
2月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
172 60
|
11天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
20天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
2月前
仿SOUL社交友附近人婚恋约仿陌陌APP网站源码
仿SOUL社交友附近人婚恋约仿陌陌APP网站源码
51 0
仿SOUL社交友附近人婚恋约仿陌陌APP网站源码
|
3月前
|
存储 BI Android开发
全开源仿第八区H5APP封装打包分发系统源码
全开源仿第八区H5APP封装打包分发系统源码
139 4
|
3月前
|
安全 数据处理 开发者
Flutter相关痛点解决问题之iBox模块的源码结构的设计如何解决
Flutter相关痛点解决问题之iBox模块的源码结构的设计如何解决
|
3月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
137 2
|
3月前
|
JSON 自然语言处理 Android开发
Flutter本地化(国际化)之App名称
Flutter本地化(国际化)之App名称
66 1