Flutter Provider入门和学习心得

flutter学习心得

关于Dart，学习flutter要掌握Dart，其实没必要仔细去学，大概看一眼语言体系就差不多了。后面使用的时候不清楚再去学就行。

其次就是Flutter的相关知识了，新手可以在Flutter中文网，先跟着demo撸一遍，然后大概了解Flutter的编程思维，然后自己做一个Flutter的App架子就行了，这里可以跟着慕课网的视频或者Github上的教程做，通过抄代码来提示自己对Flutter的了解程度。先学会UI绘制和程序流程（网络请求+解析+展示+交互）

接着就可以学一下Provider+flutter Redux这种的框架和状态管理，来对Flutter有更深更全面的理解。下面我就从这个思路整理一些好用的文章和教程（就不重复造轮子了）和自己对这些文章的理解，写一下Flutter的学习过程。

学习路程

1、撸demo

编写您的第一个 Flutter App

学习这篇文章你要学会什么？

1、理解Flutter的编程思想：数据状态驱动UI，这个你可以理解为Android编程中将所有的组件都用addView的方式去添加

2、掌握Flutter的基本写法，return weight

3、了解Dart和你所学语音的基本区别即可，这时你还不用学Dart

2、浏览Dart

Dart基础介绍

学习Dart的基础，了解部分高阶写法，了解dart的异步和同步

这篇文章将话费你不超过5min的时间就能掌握dart的常用写法

3、操刀自己的Flutter App框架搭建

一个写教程的小哥哥

这个githuber写了一系列Flutter入门的文章，可以通过跟着他撸一个自己的demo，当然了，这个Demo里有很多可以优化的点和写法上的不恰当，但是不影响Flutter的学习

通过学习这篇文章，你已经可以编写一个自己的App了，如果你的学习能力强的话

4、接入Flutter官方提供的状态管理Provider

官方文档Provider

可以通过官方的demo来修改自己的项目，来达到使用provider的目的

// ignore_for_file: public_member_api_docs, lines_longer_than_80_chars
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier].

void main() {
  runApp(
    /// Providers are above [MyApp] instead of inside it, so that tests
    /// can use [MyApp] while mocking the providers
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: MyApp(),
    ),
  );
}

/// Mix-in [DiagnosticableTreeMixin] to have access to [debugFillProperties] for the devtool
class Counter with ChangeNotifier, DiagnosticableTreeMixin {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  /// Makes `Counter` readable inside the devtools by listing all of its properties
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(IntProperty('count', count));
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),

            /// Extracted as a separate widget for performance optimization.
            /// As a separate widget, it will rebuild independently from [MyHomePage].
            ///
            /// This is totally optional (and rarely needed).
            /// Similarly, we could also use [Consumer] or [Selector].
            const Count(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        /// Calls `context.read` instead of `context.watch` so that it does not rebuild
        /// when [Counter] changes.
        onPressed: () => context.read<Counter>().increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Count extends StatelessWidget {
  const Count({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(

        /// Calls `context.watch` to make [MyHomePage] rebuild when [Counter] changes.
        '${context.watch<Counter>().count}',
        style: Theme.of(context).textTheme.headline4);
  }
}

这个是官网提供的Provider，其实就是MultiProvider中提供一个Provider的列表，然后每一个子View Consumer来观察watch和read各个Provider来实现一个类似ViewModel到View的一个VM模型，类似JetPack里的LiveData

5、使用Package

Flutter官网提供了一个三方库依赖的仓库，例如Dio、webview等一系列的插件，也有可以加载刷新的组件等，可以引入使用。

总结

其实学习并不难，可以通过抄来学习，这样的效率非常快。