快速开始 Flutter

164 阅读3分钟

更新:2023-05-25

为什么Flutter中大量final修饰的属性, const 修饰的构造方法(常量对象)

  • 因为Flutter的渲染逻辑,是增量渲染。 Widget 结构是树状结构
  • 想改变屏幕内容就直接改变widget对象
  • 常量对象的创造效率更高

flutter SDK放的位置,如果说只有一个人用就放在家目录,多人用可以考虑放在根目录下。 根目录下需要注意文件夹的权限。

环境搭建 (针对于Mac)

环境的配置:

来到你对应Shell的配置文件进行配置。 如果你使用默认的bash那么配置 ~/.bash_profile 如果你使用zsh (Mac新系统默认是zsh)那么配置 ~/.zshrc

Flutter 镜像配置(镜像地址)

export PUB_HOSTED_URL=https//pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Flutter 配置 (SDK位置)

export FLUTTER=~/flutter # SDK 的位置
export PATH=$FLUTTER/bin:$PATH

检测flutter环境是否配置好

flutter doctor

(base) ➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.0, on macOS 13.4 22F66 darwin-arm64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.1)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resourcesNo issues found!
(base) ➜  ~ 

如果有问题一个一个修理哈。

创建flutter工程以及flutter的优势

第一步: 选择新建Flutter工程

image.png

第二步: 选择工程模板

image.png

四个模式的区别:

  •     application :纯flutter 项目
    
  •     Plugin: 多平台的原生代码
    
  •     Package: flutter 的第三方库
    
  •     Module: 混合项目打包成对应的二进制包 集成到原生项目
    
  •     Skeleton:骨架,路由、资源、多语言、状态管理,文件夹等好的实践方法
    
  •     FFI Plugin: 是专门为绑定本地源代码而设计出来的,虽然在 Plugin中也可以,在不需要对应平台的代码时候 可以使用这个(主要是C、C++ )
    

命令模式创建

flutter create myProject

可选参数

template= type指定不同的项目类型,
–template=app/module/package/plugin/skeleton

–platforms=ios/android/windows/linux/macos/web。指定项目支持哪些平台
-a:指定android开发使用的语言,默认是kotlin
-i:指定ios使用的语言,默认是swift

创建一个plugin

flutter create --org com.leb --template=plugin --platforms=android,ios -a kotlin -i swift hello

安卓Studio创建

image.png

image.png

优势

之前的跨平台RN 是基于原生UI包装来跨平台,flutter是把 skia 渲染引擎安装到手机上 进行dart代码,不依赖原生UI。有一套自己的UI 体系, iOS 安卓 高度统一。

热重载

全平台(除了小程序)(有一个第三方支持小程序MPFlutter)

hello_flutter

image.png

image.png

import 'package:flutter/material.dart';

类似于 iOS 里面的 UIKit

widget

万物皆widget

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        "hello",
        // 这个东西必须有(文字的渲染方式)
        textDirection: TextDirection.ltr,
      ),
    );
  );
}

分为有状态的和无状态的

自定义widget

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return Text("data");
    // TODO: implement build
    // throw UnimplementedError();
  }
  
}

文字样式

image.png

image.png

Color 专门有一个对象 列举了一些常用的颜色。它是Colors

MaterialAPP

import 'package:flutter/material.dart'; 貌似所有的东西都跟 这个 material.dart相关

官方封装的一个常用框架:

 return const MaterialApp(
      home: Scaffold(
        
      ),
    );

初探ListView

使用 ListView.builder 加载数据列表

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});


  Widget _loadList(BuildContext context, int index) {
    return Column(
        children: [
          Image.network(
            datas[index].imageUrl,
            height: 128,
          ),
          Text(datas[index].name)
        ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView.builder(
          itemBuilder: _loadList,
          itemCount: datas.length,
      )
    );
  }
}