【第二篇】Flutter的认识一、认识目录结构二、一切都是Widget UI 组件 https://docs.flut

一、认识目录结构

二、一切都是Widget

英文中的 Widget 是" 小器具，装饰品，窗口小部件 "的意思，但是我更愿意称呼为" 小组件、卡片 "

UI 组件

docs.flutter.dev/development…

gallery.flutter.dev/

x-wei.github.io/flutter_cat…

如果你需要什么组件，可以先去以上两个网址看看有现成的能否满足需求。

#架构设计

渲染引擎

skia.org/

#sdk 源码目录

sdk/packages/flutter/lib/src

名称	说明
Foundation	基础部分
Animation	动画
Painting	边框绘制、颜色、裁剪图像处理、画笔、插值器等跟绘制、图像、装饰相关的类
Gestures	事件类、长按、触摸、放大等等
Rendering	渲染 Widget 的基础库
Widget	依赖 Rendering 层进行构建，Widget 是 Flutter 的核心
Material	Android 平台的风格
Cupertino	iOS 平台风格的扁平化

#widget 分类

基础组件 Widget（Basics）：

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

Material Components：
App 结构和导航类

Scaffold、Appbar、BottomNavigationBar、TabBar、TabBarView、MaterialApp、WidgetsApp、Drawer、SliverAppBar

按钮类

RaisedButton、FloatingActionButton、FlatButton、IconButton、DropdownButton、PopupMenuButton、ButtonBar

输入和选择类

TextField、Checkbox、Raido、Switch、Slider、Date&Time Pickers

对话框和控制面板类

SimpleDialog、AlertDialog、BottomSheet、ExpansionPanel、SnackBar）；

信息显示类（Image、Icon、Chip、Tooltip、DataTable、Card、LinearProgressIndicator、CircularProgressIndicator、GridView

布局类

ListTile、Stepper、Divider

Cupertino （iOS-style widgets）：

CupertinoActionSheet、CupertinoActivityIndicator、CupertinoAlertDialog、CupertinoButton、CupertinoDatePicker、CupertinoDialog、CupertinoDialogAction、CupertinoFullscreenDialogTransition、CupertinoPageScaffold、CupertinoPageTransition、CupertinoPicker、CupertinoPopupSurface、CupertinoSegmentedControl、CupertinoSlider、CupertinoSwitch、CupertinoNavigationBar、CupertinoTabBar、CupertinoTabScaffold、CupertinoTabView、CupertinoTextField、CupertinoTimerPicker

Layout：
单个子元素的布局 Widget

Container、Padding、Center、Align、FittedBox、AspectRatio、ConstrainedBox、Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth、LimitedBox、Offstage、OverflowBox、SizedBox、SizedOverflowBox、Transform、CustomSingleChildLayout

多个子元素的布局 Widget

Row、Column、Stack、IndexedStack、GridView、Flow、Table、Wrap、ListBody、CustomMultiChildLayout、LayoutBuilder、ListView、Expanded

Text 文本显示类：

Text、RichText、DefaultTextStyle

Assets、图片、Icons 类：

Image、Icon、RawImage、AssetBundle

Input 输入类：

Form、FormField、RawKeyboardListener

动画和 Motion 类：

AnimatedContainer、AnimatedCrossFade、Hero、AnimatedBuilder、DecoratedBoxTransition、FadeTransition、PositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition、AnimatedDefaultTextStyle、AnimatedListState、AnimatedModalBarrier、AnimatedOpacity、AnimatedPhysicalModel、AnimatedPositioned、AnimatedSize、AnimatedWidget、AnimatedWidgetBaseState

交互模型类：
触摸交互

Draggable、LongPressDraggable、GestureDetector、DragTarget、Dismissible、IgnorePointer、AbsorbPointer、Scrollable

路由导航

Hero、Navigator

样式类：

Padding、Theme、MediaQuery

绘制和效果类：

Transform、Opacity、DecoratedBox、FractionalTranslation、RotatedBox、ClipOval、ClipPath、ClipRect、CustomPaint、BackdropFilter

Async 异步模型类：

FutureBuilder、StreamBuilder

滚动类：

GridView、ListView、NestedScrollView、SingleChildScrollView、Scrollable、Scrollbar、CustomScrollView、NotificationListener、ScrollConfiguration、RefreshIndicator、PageView

辅助功能类：

Semantics、MergeSemantics、ExcludeSemantics

#参考

三、Flutter 图片和资源的引入和使用

没学习flutter之前以为和Vue一样的，结果搞了个大乌龙，没有配置插件和静态资源配置

Flutter 应用程序包含代码和 assets（也为资源）。资源是被打包到应用程序安装包中，可以在运行时访问的一种文件。常见的资源类型包括静态数据（例如 JSON 文件），配置文件，图标和图片（JPEG，WebP，GIF，动画 WebP / GIF，PNG，BMP 和 WBMP）。

指定资源

Flutter 使用 pubspec.yaml 文件，位于项目根目录，来识别应用程序所需的资源。

什么是 pubspec.yaml 文件

在Flutter中，pubspec.yaml文件是一个用于管理项目依赖项和资源的配置文件。它位于Flutter项目的根目录下，并且是一个YAML格式的文本文件。

pubspec.yaml文件包含了以下主要内容：

项目信息：你可以在name字段中指定项目名称，在description字段中提供项目描述，在version字段中指定项目版本号等。
依赖项管理：你可以使用dependencies字段来列出项目所依赖的Flutter包或其他Dart库。每个依赖项都有一个名称和一个版本约束。当你运行flutter pub get命令时，Flutter会根据pubspec.yaml文件中的依赖项配置自动下载并安装所需的包。
资源管理：你可以使用assets字段来指定项目中需要作为资源使用的文件路径。这些资源可以是图片、字体、配置文件等。通过在pubspec.yaml文件中配置资源路径，Flutter可以将这些资源文件打包到应用程序中，并且你可以通过相应的API来访问它们。
其他配置：pubspec.yaml文件还可以包含其他配置项，例如构建设置、环境变量等。

name: zu_fang  # 项目名称

description: A new Flutter project.  # 项目描述 

version: 1.0.0+1

environment:
  sdk: ^3.7.0
  
dependencies:
  flutter:
    sdk: flutter
  get: ^4.7.2


dev_dependencies:
    flutter_test:
        sdk: flutter  # 开发环境下的测试依赖

flutter:
  assets:
  - assets/images/  # 资源文件夹路径
  - assets/fonts/   # 字体文件夹路径

fonts:
  - family: Roboto  # 字体族名称
    fonts:
  - asset: assets/fonts/Roboto-Regular.ttf  # 字体文件路径
    - asset: assets/fonts/Roboto-Bold.ttf
      weight: 700  # 字体粗细设置

当配置完该文件，一定要运行flutter pub get命令：在终端中运行flutter pub get命令，以确保Flutter项目依赖项和资源已正确配置。

【第二篇】Flutter的认识