zoukankan      html  css  js  c++  java
  • 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 FilesJavajdk1.8.0_202in
          %JAVA_HOME%in;%JAVA_HOME%jrein

    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. 实际项目技巧总计
  • 相关阅读:
    Sass:@error
    Sass @warn
    Sass @debug
    Sass:@at-root
    Sass-@extend
    sass @import 规则
    Opacity函数-transparentize()、 fade-out()函数
    Sass函数:Opacity函数-opacify()、fade-in()函数
    Sass-Opacity函数-rgba()函数
    学习笔记97—matlab 获取矩阵中特定值的坐标
  • 原文地址:https://www.cnblogs.com/csj007523/p/13370479.html
Copyright © 2011-2022 走看看