flutter 学习笔记1

1.现有的主流移动开发平台android和ios

跨平台技术的时间轴

       最早为hybird混合开发，后来为React native的桥接技术，Hybird的主要依赖的WebView的技术，一个重量级的控件，容易产生内存问题。对于复杂的webView显示性能不好。

       React native core 作为桥接，建javascript转为Native调用，React Native最终会生成对应的自定义的原生控件。这种策略将框架本身和App开发者绑定在系统的控件上。开发者还需要处理不同平台间的差异，这个使跨平台特性大折扣。

 

       Flutter 最新的跨平台技术支持Android， Ios,Macos,windows linux的多个系统

2.fluter的特点

• 跨平台
• 丝滑的感觉
• 响应式框架
• 支持插件
• 60fps超高性能

    一切皆为组件，和一切都是对象有点像，统一的对象模型，widget

• 一个界面组件
• 一个文本样式
• 一个布局
• 一个动画处理
• 一个手势处理

例如：TextBox属性和方法

TextBox

bottom	底部间距属性
direction	文本排列方向属性
left	左侧间距属性
right	右侧间距属性
top	上部间距属性
topRect	导出矩形方法
toString	转换成字符串方法

3.flutter下载安装

本文直接下载flutter zip文件，比较大，请考虑空间大小；

下载文件比较大，需要占用2.8G的空间

zip文件下载来下为

4.flutter基本命令

flutter --help
Manage your Fl

utter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands
                            executed.
                            If used with --help, shows hidden options.

-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.
    --bug-report            Captures a bug report file to submit to the Flutter
                            team.
                            Contains local paths, device identifiers, and log
                            snippets.

    --packages              Path to your ".packages" file.
                            (required, since the current directory does not
                            contain a ".packages" file)

Available commands:
  analyze                  Analyze the project's Dart code.
  assemble                 Assemble and build flutter resources.
  attach                   Attach to a running application.
  bash-completion          Output command line shell completion setup scripts.
  build                    Flutter build commands.
  channel                  List or switch flutter channels.
  clean                    Delete the build/ and .dart_tool/ directories.
  config                   Configure Flutter settings.
  create                   Create a new Flutter project.
  devices                  List all connected devices.
  doctor                   Show information about the installed tooling.
  drive                    Runs Flutter Driver tests for the current project.
  emulators                List, launch and create emulators.
  format                   Format one or more dart files.
  generate                 run code generators.
  help                     Display help information for flutter.
  install                  Install a Flutter app on an attached device.
  logs                     Show log output for running Flutter apps.
  make-host-app-editable   Moves host apps from generated directories to
                           non-generated directories so that they can be edited
                           by developers.
  precache                 Populates the Flutter tool's cache of binary
                           artifacts.
  pub                      Commands for managing Flutter packages.
  run                      Run your Flutter app on an attached device.
  screenshot               Take a screenshot from a connected device.
  test                     Run Flutter unit tests for the current project.
  upgrade                  Upgrade your copy of Flutter.
  version                  List or switch flutter versions.

Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used
options.

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ╚════════════════════════════════════════════════════════════════════════════╝

5.遇到的问题

反复出现这个问题

用这个解决：

sudo xattr -r -d com.apple.quarantine 【flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevice_id
sudo xattr -r -d com.apple.quarantine 【flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicename
sudo xattr -r -d com.apple.quarantine 【flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicescreenshot
sudo xattr -r -d com.apple.quarantine 【flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog
sudo xattr -r -d com.apple.quarantine 【flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/ideviceinfo

6.安装android 的插件flutter，先跑个例子试试

7.创建一个项目

重新更新了一个android，可以识别

8.flutter devices 等于adb devices 查看虚拟机，ios和android都可以查看
connected device:

Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 9 (API 28)
(emulator)

 

9.android studio 安装flutter的插件和dart的插件

1.android studio->prefenerce->插件->输入flutter或者是dart的点击安装

2.flutter doctor检查依赖关系

3.添加例子：

新建flutter的project的项目；

import 'dart:io';

import 'package:flutter_clock_helper/customizer.dart';
import 'package:flutter_clock_helper/model.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'digital_clock.dart';

void main() {
  // A temporary measure until Platform supports web and TargetPlatform supports
  // macOS.
  if (!kIsWeb && Platform.isMacOS) {
    // TODO(gspencergoog): Update this when TargetPlatform includes macOS.
    // https://github.com/flutter/flutter/issues/31366
    // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override.
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  }

  // This creates a clock that enables you to customize it.
  //
  // The [ClockCustomizer] takes in a [ClockBuilder] that consists of:
  //  - A clock widget (in this case, [DigitalClock])
  //  - A model (provided to you by [ClockModel])
  // For more information, see the flutter_clock_helper package.
  //
  // Your job is to edit [DigitalClock], or replace it with your
  // own clock widget. (Look in digital_clock.dart for more details!)
  runApp(ClockCustomizer((ClockModel model) => DigitalClock(model)));
}

启用sdk的虚拟机

运行上面代码，部署到android虚拟机上；

10.运行结果 flutter run

flutter create hello

flutter run