社内でFlutterのハンズオンを行ったので、資料を公開します

// JavaScriptに似たなんらかの言語
button.onTap((event) {
  currentStatus = !currentStatus;
  if (currentStatus == true) {
    button.color = Colors.blue;
    button.attributes.disabled = false;
  } else {
    button.color = Colors.red;
    button.attributes.disabled = true;
  }
});

// Flutterのコード
Widget _button(BuildContext context, bool enabled, Color color) {
  return CustomButton(
    enabled: enabled,
    color: color,
  );
}

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.5 18F203, locale ja-DE)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.44.2)
[✓] Connected device (1 available)

• No issues found!

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.5 18F203, locale ja-DE)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 7076811.2.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.44.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

# 以下のコマンドでiOSシミュレータを起動
$ open -a Simulator

TOKEN='your_access_token'

$ flutter pub get
Running "flutter pub get" in flutter_hands_on...                    0.8s

$ flutter run

 Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
 Running Xcode build...

  ├─Assembling Flutter resources...                          15.7s
  └─Compiling, linking and signing...                         9.2s
 Xcode build done.                                           28.9s
 Syncing files to device iPhone 11 Pro Max...
 11,139ms (!)

 🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

$ flutter run
No supported devices connected.
$ open -a Simulator

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SUZURI"),
      ),
      body: Center(
        child: Text("Hello, SUZURI!"),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  // ミュータブルなフィールド。いつでも代入できる。
  int count;
  // イミュータブルなフィールド。
  // インスタンス生成時にコンストラクタで代入され、それ以降代入されることがない。
  final int immutableCount;
}

class SimpleCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Containerはウィジェットの一つ
    return Container();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SUZURI"),
      ),
      // bodyで表示したいウィジェットを別のメソッドに切り出す
      body: _productsList(context),
    );
  }

  // Widgetを返すメソッド
  // 引数はBuildContextで、呼び出し側のbuildで持っているものを渡す
  Widget _productsList(BuildContext context) {
    return Container(
      // GridViewはウィジェットをグリッドで表示してくれるウィジェット
      // iOS UIKitで言うところの UICollectionView
      // GridView.builderというfactory(カスタムコンストラクタ)で初期化する
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // グリッド横方向のウィジェット数
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          // グリッド表示するウィジェットの縦横比
          childAspectRatio: 0.7,
        ),
        // グリッドに表示したいウィジェットの数
        itemCount: 6,
        // itemBuilderはGridViewのインデックス毎に表示したいウィジェットを返すデリゲート
        // context, indexを引数にとり、ウィジェットを返す関数を指定してやる
        // itemContの回数だけ呼ばれる、この例では6回
        itemBuilder: (context, index) {
        	// とりあえずグレーのコンテナを表示してみる
          return Container(
            color: Colors.grey,
            margin: EdgeInsets.all(16),
          );
        }),
    );
  }
}

// import宣言はコピーペーストしても良いですし、VS Codeならクラス参照の記述を補完すると自動で追加されます
import 'package:flutter/material.dart';
import 'package:flutter_hands_on/models/product.dart';
import 'package:flutter_hands_on/requests/product_request.dart';

// httpライブラリを`http`という名前でimportする
import 'package:http/http.dart' as http;

// ChangeNotifierを継承して新しいStoreクラスを作る
class ProductListStore extends ChangeNotifier {

  // 実際に管理される商品のリスト
  List<Product> _products = [];
  // 外側から直接変更されないように、getterのみ公開
  List<Product> get products => _products;

  // リクエスト実行中に再リクエストしないようにしたい
  bool _isFetching = false;
  bool get isFetching => _isFetching;

  // Storeに変更を要求するインターフェイス
  fetchNextProducts() async {
    if (_isFetching) {
      return;
    }
    _isFetching = true;
    // ProductRequestを初期化
    // http.Clientは外側から与える
    final request = ProductRequest(
      client: http.Client(),
      offset: _products.length,
    );

    // request.fetchはList<Product>を返すFutureオブジェクトを返す
    final products = await request.fetch().catchError((e) {
      _isFetching = false;
    });
    // 取得できた商品のリストを追加する
    _products.addAll(products);
    _isFetching = false;
    // 追加できたら、このStoreを購読しているウィジェットに通知する
    notifyListeners();
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
// import宣言を追加する
import 'package:flutter_hands_on/stores/product_list_store.dart';
import 'package:provider/provider.dart';

void main() async {
  await DotEnv().load('.env');
  // MultiProviderも、ウィジェットの一種
  runApp(MultiProvider(
    // MultiProviderは複数のChangeNotifierProviderを格納できるProviderのこと
    // providersにList<ChangeNotifierProvider>を指定する
    providers: [
      // ChangeNotifierProviderはcreateにデリゲートを取り、この中でChangeNotifierを初期化して返す
      ChangeNotifierProvider(
        create: (context) => ProductListStore(),
      )
    ],
    // childにはもともと表示に使っていたウィジェットを配置する
    child: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // addPostFrameCallbackは、initStateが呼ばれた後に一度のみ実行されるコールバック
    // ウィジェットの描画を行う際、最初の一度のみ実行したい処理を記述する
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // context.read<T>()メソッドでstoreへの参照を取得する
      // Tには、取得したいChangeNotifierのクラスタイプを指定する、今回はProductListStore
      // readは、ChangeNotifierのnotifyListeners()が呼ばれてもウィジェットのリビルドフラグを有効にしない
      // 副作用を伴うアクションを呼ぶ場合は、必ずbuildメソッドの外でreadを使う
      final store = context.read<ProductListStore>();
      if (store.products.isEmpty) {
        store.fetchNextProducts();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SUZURI"),
      ),
      body: _productsList(context),
    );
  }

  Widget _productsList(BuildContext context) {
    // storeの参照を取得
    // ここではStoreに変更があったらウィジェットに反映したいのでwatchを使う
    final store = context.watch<ProductListStore>();
    final products = store.products;
    // Storeから取得できた商品の数を見て、表示すべきウィジェットを変える
    // 具体的には、0件→空っぽのリスト、1件以上→実際の商品リスト
    if (products.isEmpty) {
      return Container(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            childAspectRatio: 0.7,
          ),
          itemCount: 6,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.grey,
              margin: EdgeInsets.all(16),
            );
          },
        ),
      );
    } else {
      // 商品のウィジェットをまだ作っていないので、仮でTextを表示してみる
      return Center(child: Text("products"));
    }
  }
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
   // Provider.of<T>メソッドでstoreへの参照を取得する
   // Tには、取得したいChangeNotifierのクラスタイプを指定する、今回はProductListStore
   // 引数のcontextは必須、listen: falseはオプショナル引数
   // listenは、「ChangeNotifierのnotifyListeners()が呼ばれたらウィジェットをリビルドするか」のフラグ
   // 今回はリビルドされたくないのでfalse
   final store = Provider.of<ProductListStore>(context, listen: false);
   if (store.products.isEmpty && store.isFetching == false) {
     // 表示すべき商品が空っぽで、かつ取得中でなければStoreに商品を読み込んでもらう
     // buildメソッドはウィジェットがリビルドされるたびに呼ばれるため、制御しないと大量のリクエストが飛ぶこともあるので注意
     store.fetchNextProducts();
   }
   return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

Widget _productsList(BuildContext context) {
  final store = context.watch<ProductListStore>();
  final products = store.products;
  if (products.isEmpty) {
    /*省略*/
  } else {
    return Container(
      // EmptyProductListと同じく、GridView.builderでグリッドビューのウィジェットを表示する
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          childAspectRatio: 0.7,
        ),
        // storeから取得できたproductsの数を使う
        itemCount: products.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.all(16),
            // itemBuilderのindexには、表示されるセルの番号が格納されている
            // Image.networkは画像のURLを渡すと、画像のダウンロードと表示をいい感じにやってくれる
            // product.sampleImageUrlには商品のサンプル画像のURLが格納されている
            child: Image.network(products[index].sampleImageUrl),
          );
        },
      ),
    );
  }

import 'package:flutter/material.dart';
import 'package:flutter_hands_on/models/product.dart';

// StatelessWidgetを継承
class ProductCard extends StatelessWidget {
  final Product product;

  // コンストラクタでProductを受け取り、フィールドに格納
  // {}はoptional named parameterと呼ばれるもので、this.productはフィールドにセットするためのシンタックスシュガーです
  ProductCard({this.product});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(16),
      // Columnはウィジェットを縦に積むことができるウィジェット
      child: Column(
        // childrenにはList<Widget>を渡す
        // 上から表示したい順にウィジェットを配置する
        children: <Widget>[
          Image.network(product.sampleImageUrl),
          // SizedBoxはウィジェットのサイズを固定するためのウィジェット
          // heightやwidthを指定すると、childのウィジェットのサイズがその通りになる便利なウィジェット
          SizedBox(
            height: 40,
            // Product.titleは商品名を表す
            child: Text(product.title),
          ),
          // Product.priceにはその商品の金額が格納されている
          Text("${product.price.toString()}円"),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
// ProductCardをimportしておく
import 'package:flutter_hands_on/components/product_card.dart';
import 'package:flutter_hands_on/stores/product_list_store.dart';
import 'package:provider/provider.dart';
/*省略*/

Widget _productsList(BuildContext context) {
  final store = context.watch<ProductListStore>(context);
  final products = store.products;
  if (products.isEmpty) {
    /*省略*/
  } else {
    return Container(
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          childAspectRatio: 0.7,
        ),
        itemCount: products.length,
        itemBuilder: (context, index) {
          // itemBuilderで直接Imageウィジェットを返すのではなく、ProductCardウィジェットを返す
          return ProductCard(product: products[index]);
        },
      ),
    );
  }

class ProductCard extends StatelessWidget {
  /*省略*/
  @override
  Widget build(BuildContext context) {
    // ContainerをGestureDetectorでラップする
    return GestureDetector(
      // onTapは、childウィジェットがタップされたら発火する
      onTap: () async {
        print("tapped");
      },
      // Container自体は変更不要
      child: Container(
        margin: EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            Image.network(product.sampleImageUrl),
            SizedBox(
              height: 40,
              child: Text(product.title),
            ),
            Text("${product.price.toString()}円"),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_hands_on/models/product.dart';

class ProductDetail extends StatelessWidget {
  // 画面を遷移するために必要なウィジェットの名前を定義する
  static const routeName = "/productDetail";

  @override
  Widget build(BuildContext context) {
    // 画面遷移する際に渡した引数が格納されている（後述）
    // この引数はObject型として扱われるので、明示的にProduct型を指定する必要がある
    final Product product = ModalRoute.of(context).settings.arguments;
    // 新しい画面を表示したいので、Scaffoldウィジェットを返す
    return Scaffold(
      appBar: AppBar(
        title: Text("商品詳細"),
      ),
      body: Container(
        child: Center(
          child: Text(
            // とりあえず商品名でも表示してみる
            product.title,
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_hands_on/components/product_card.dart';
// ProductDetailをimport
import 'package:flutter_hands_on/pages/product_detail.dart';
import 'package:flutter_hands_on/stores/product_list_store.dart';
import 'package:provider/provider.dart';

/*省略*/
class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final store = context.read<ProductListStore>();
      if (store.products.isEmpty) {
        store.fetchNextProducts();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      // MaterialAppのroutesに、遷移したいウィジェットの情報を格納する
      // { ルーティング名: (context) => 表示したいウィジェット, }という形式で記述する
      // {}はMapを表す、ここでは Map<String, Widget Function(BuildContext)>のこと
      routes: {
        ProductDetail.routeName: (context) => ProductDetail(),
      },
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_hands_on/models/product.dart';
// ProductDetailをimport
import 'package:flutter_hands_on/pages/product_detail.dart';

class ProductCard extends StatelessWidget {
  final Product product;

  ProductCard({this.product});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () async {
        // Navigator.of(context).pushNamedで遷移を実行する
        // 第一引数はルーティング名、argumentsはoptionalでパラメータを渡せる
        // ProductDetailで書いた通り、遷移先のウィジェットでは、
        // ModalRoute.of(context).settings.arguments でこの引数が取得できる
        Navigator.of(context).pushNamed(
          ProductDetail.routeName,
          arguments: this.product,
        );
      },
      child: Container(
        /*省略*/
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_hands_on/models/product.dart';

class ProductDetail extends StatelessWidget {
  static const routeName = "/productDetail";

  @override
  Widget build(BuildContext context) {
    /*省略*/
  }

  Widget _body(BuildContext context, Product product) {
    // SingleChildScrollViewは、childウィジェットが画面に収まりきらない時にスクロールで表示できるようにするウィジェット
    return SingleChildScrollView(
      // Columnは下にどんどん伸びていくので、ScrollViewと相性が良い
      child: Column(
        children: <Widget>[
          Center(
            child: Image.network(product.sampleImageUrl),
          ),
          Text(
            product.title,
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(product.item.humanizeName),
          Text("${product.price.toString()}円"),
          Text("作った人: ${product.material.user.name}"),
          // product.material.descriptionは商品の説明
          // 空っぽであることもあるので、三項演算子で出すウィジェットを変える
          // String.isEmtpyは空文字の時trueを返す
          product.material.description.isEmpty
            ? Container()
            : _descriptionSection(context, product),
        ],
      ),
    );
  }

  Widget _descriptionSection(BuildContext context, Product product) {
    return Container(
      margin: EdgeInsets.only(top: 16.0),
      child: Column(
        children: <Widget>[
          Text(
            "このアイテムについて",
            style: TextStyle(
              color: Colors.grey,
            ),
          ),
          Container(
            margin: EdgeInsets.all(16.0),
            child: Text(product.material.description),
          ),
        ],
      ),
    );
  }
}