flutter 学习2

flutter 从入门到实战学习2

1.flutter 初相识:

  1. flutter环境搭建
      1. flutter 是一个ui sdk,可以进行移动开发(iOS,android),web端开发,桌面开发,跨平台解决方案。阿里咸鱼团队
        美观,快速,高效,开放,一统大前端的可能。
        1.webview --> html css js
        2.react native (facebook,2015)-->js ,需通过桥接来生成原生API
        3.flutter (google,java/dart--android框架/flutter框架--skia引擎--CPU/GPU--on flutter生成ios/android

        flutter环境搭建(windows):

        1.安装java jdk,配置环境变量:bin
        2.安装android studio, androud studio下载: http://www.android-studio.org/index.php/download
        3.安装flutter sdk
        配置环境变量:FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn
        PUB_HOSTED_URL:https://pub.flutter-io.cn

        2.flutter环境搭建(macos):
        1.升级MACOS到最新系统,升级xcode
        2.下载flutter,配置flutter环境变量
        3.运行flutter doctor命名检查环境变量
        4.配置flutter ios 环境
        5.修改flutter sdk目录权限
        6.xcode 打开flutter项目,模拟器运行
        7.在vscode 中配置 开发flutter项目

        参考:
        (java jdk,adnroid studio,flutter sdk,flutter,dart)
        1.下载flutterSDK,解压
        2.设置环境变量(flutter,dart),cmd flutter --version,dart --vrsion 测试安装
        3.macos:xcode,android studio,AVD manager,android模拟器,
        windows:android studio,ave manager,android模拟器,
        安装参考: https://flutterchina.club/setup-windows/
        学习参考:https://www.itying.com/goods-1120.html

        1、Dart Flutter入门实战视频教程网盘下载地址:
        链接:https://pan.baidu.com/s/1JAnQGkKF_tbwoBHQD0qaow
        提取码: sacl

        2、网盘限速解决方法:
        http://bbs.itying.com/topic/5d00a7f5f322340b2c90e76f

        3、在线播放地址
        小码哥flutter,dart:https://www.bilibili.com/video/BV1ya4y1h7U4?p=1

        Dart教程在线试听地址: https://www.bilibili.com/video/av52490605

        Flutter教程在线试听地址: https://www.bilibili.com/video/av53072584/?p=1

        PUB_HOSTED-URL
        https://pub.flutter-io.cn
        https://storage.flutter-ic.cn
        https://www.oracle.com/techntwork/java/javase/downloads/jdk8-downloads-2133151.html
        androud studio下载: http://www.android-studio.org/index.php/download

        C:\Program Files\Java\jdk1.8.0_202\bin
        %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

  2. 第一个flutter应用
  • 1.flutter项目目录结构:
  • android:android平台相关代码
  • ios:ios平台相关代码
  • lib:flutter相关代码,主要编写的代码放在这个文件夹
  • test:用于存放测试代码
  • pubspec.yanl:配置文件,一般存放第三方库的依赖
  • 2.flutter的入口文件,入口方法:
  • lib/main.dart
  • void main(){
  • runApp(MyApp());
  • }
  • 3.自定义组件:materral.dart
  • class MyApp extends StatelessWidget{
  • @override
  • Widget bulid(BulidContext context){
  • reutrn MaterialAPP(
  • home:Scaffold(
  • appBar:AppBar(
  • title:Text("FLUTTER DEMO")
  • ),
  • body:Center(
  • child:Text(‘我是一个文本’),
  • )
  • )
  • }
  • }
  • 4.主题组件:MateriaApp,Scaffold,AppBar,Center
  • 5.容器组件container,Text组件
  • 6.图片组件:Image.asset本地图片(准备本地图片,pubspec.yaml配置文件配置图片a.jpeg,2.0x/a.jpeg,3.0x/a.jpeg),Image.network网络图片
  • 7.flutter实现圆角及圆形图片,clipOval
  • 8.列表组件listview:垂直列表,垂直图文列表,水平列表,动态列表,距阵列表
  • 9.gridview组件,动态gridview组件
  • 10.页面布局padding row column,expanded,元素行间距:SizedBox(height:10)
  • 11.
  • 31.flutter http get 请求数据,post提交数据
  • json字符串转换成map,map转换成字符串
  • json.decode(str)
  • json.ecode(map)


2.dart语言精讲

  1. 认识安装dart
  2. dart基础语法
  3. dart异步编程


3.常见的widget

  1. flutter初体验
  2. 基础widget的使用
  3. 布局widget解析
  4. 滚动widget
  5. 案例学习


4.实战功能知识

  1. flutter路由和导航
  2. flutter实现动画
  3. 事件处理的思考
  4. 各种状态管理方案
  5. 网络请求的选择


5.综合项目实战

  1. 电商/音乐类项目实战

安装过程:https://www.bilibili.com/video/BV1x4411j7bW?p=1

小码哥flutter从入门到精通:https://www.bilibili.com/video/BV1ya4y1h7U4?p=1
大地flutter:https://www.bilibili.com/video/BV1x4411j7bW?p=31

flutter中文网:https://flutterchina.club/setup-windows/
6.进阶知识补充

  1. 应用主题theme
  2. 实现应用国际化
  3. 发布前测试test
  4. 实际项目技巧总计
posted @   大树2  阅读(368)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
历史上的今天:
2012-07-24 XCode 快捷键,MAC 快捷键
2008-07-24 System.Drawing.Color.FromArgb(144,238,255);
2008-07-24 checkbox 全选的使用
点击右上角即可分享
微信分享提示