Learning Flutter

发布于 2018-06-27 03:44:36

Contents

  • core strucutre
  • layout
  • assets
  • style
  • http
  • interaction
  • language Dart
  • cookbook
    • design basic
    • images
    • lists
    • handling gestures
    • navigation
    • animation
    • networking
    • persistence
    • form
    • testing
      • unit tests
      • widget tests

学习方法

  • Strong concepts: deal effectively with complexity by providing simple, relevant ways of structuring thoughts, logic, or data.
  • Clear code: lets us express those concepts cleanly, without being distracted by language pitfalls, excessive boilerplate, or auxiliary detail.
  • Fast iteration: is key to experimentation and learning — and software development teams learn for a living: what the requirements really are, and how best to fulfill them with concepts expressed in code.

File structure

project_root
  android
  ios
  lib
    main.dart

Key notes

  • The pubspec file pubspec.yaml manages the assets for a Flutter app.
  • Widgets are classes used to build UIs.
  • Widgets are used for both layout and UI elements.
  • Compose simple widgets to build complex widgets.
  • open ios/Runner.xcworkspace will open it in XCode to change settings and siging cetification

布局

  • 部件
  • 对齐
  • 大小
    • 打包压缩空间
    • constraints
      • In Flutter, widgets are rendered by their underlying RenderBox objects. Render boxes are given constraints by their parent, and size themselves within those constraints. Constraints consist of minimum and maximum widths and heights; sizes consist of a specific width and height.
        • Those that try to be as big as possible
        • Those that try to be the same size as their children
        • Those that try to be a particular size
      • In certain situations, the constraint that is given to a box will be unbounded, or infinite
  • 嵌套

Lay out a widget

  1. Even the app itself is a widget.
  2. It’s easy to create a widget and add it to a layout widget.
  3. To display the widget on the device, add the layout widget to the app widget.
  4. It’s easiest to use Scaffold, a widget from the Material Components library, which provides a default banner, background color, and has API for adding drawers, snack bars, and bottom sheets.
  5. If you prefer, you can build an app that only uses standard widgets from the widgets library.

Lay out multiple widgets vertically and horizontally**

  • You can use a Row widget to arrange widgets horizontally, and a Column widget to arrange widgets vertically.
  • Row and Column are two of the most commonly used layout patterns.
  • Row and Column each take a list of child widgets.
  • A child widget can itself be a Row, Column, or other complex widget.
  • You can specify how a Row or Column aligns its children, both vertically and horizontally.
    • You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties.
  • You can stretch or constrain specific child widgets.
  • You can specify how child widgets use the Row’s or Column’s available space.

Widgets of layouts

  • Container
    • margin
    • border
    • padding
    • content
  • GridView
    • GridView.count allows you to specify the number of columns
    • GridView.extent allows you to specify the maximum pixel width of a tile
  • ListView
  • Stack
  • material components
    • Card
    • ListTile
      • Use ListTile, a specialized row widget from the Material Components library, for an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. ListTile is most commonly used in Card or ListView, but can be used elsewhere.

Assets

  • loading
    • text
    • image
      • asset images in package dependencies
  • asset bundling
    • During a build, Flutter places assets into a special archive called the asset bundle, which apps can read from at runtime.
  • asset variants
    • The build process supports the notion of asset variants: different versions of an asset that might be displayed in different contexts. When an asset’s path is specified in the assets section of pubspec.yaml, the build process looks for any files with the same name in adjacent subdirectories. Such files are then included in the asset bundle along with the specified asset.

Web analogs

TODO

Building and installing the Flutter app

  • cd $FLUTTER_ROOT/examples/flutter_gallery
  • flutter upgrade
  • flutter run --release

The flutter run --release command both builds and installs the Flutter app.

comments powered by Disqus