[Flutter]Providerを使ってみる

Flutterのプロバイダーを使って簡単なアプリを作ってみようと思います!ノンプログラマーの私でもコピペするだけで使えるレベルです。

Providerを使ったアプリの完成画像

今回は単純にプラスボタン&マイナスボタンを設置して数字を増減させるアプリを作成します!

 

Providerをインストール

https://pub.dev/packages/provider

最新のバージョンをインストールします。

  1. pubspec.yamlを開く
  2. dependenciesに 「provider: ^4.1.3」を記載
  3. ターミナルで「flutter pub get」を実行

 

dartファイルを作成

必要なダートファイルはこちら

  1. blocs/counter_bloc.dart
  2. pages/counter.dart
  3. widgets/increment.dart
  4. widgets/decrement.dart
  5. main.dart

blocs/counter_bloc.dart

import ‘package:flutter/material.dart’;

class CounterBloc extends ChangeNotifier {
int _counter = 10;
int get counter => _counter;

set counter(int val){
_counter = val;
notifyListeners();
}

increment() {
counter++;
}

decrement() {
counter–;
}
}

pages/counter.dart

import ‘package:flutter/material.dart’;
import ‘package:flutter_provider/blocs/counter_bloc.dart’;
import ‘package:flutter_provider/widgets/decrement.dart’;
import ‘package:flutter_provider/widgets/increment.dart’;
import ‘package:provider/provider.dart’;

class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = Provider.of<CounterBloc>(context);

return Scaffold(
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
counterBloc.counter.toString(),
style: TextStyle(fontSize: 60.0),
),
IncrementButton(),
DecrementButton()
],

),

)
),
);
}
}

widgets/increment.dart

import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;

import ‘package:flutter_provider/blocs/counter_bloc.dart’;

class IncrementButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = Provider.of<CounterBloc>(context);

return FlatButton.icon(
icon: Icon(Icons.add),
label: Text(“Add”),
onPressed: () => counterBloc.increment(),
);
}
}

widgets/decrement.dart

import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;

import ‘package:flutter_provider/blocs/counter_bloc.dart’;

class DecrementButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = Provider.of<CounterBloc>(context);

return FlatButton.icon(
icon: Icon(Icons.remove),
label: Text(“Remove”),
onPressed: () => counterBloc.decrement(),
);
}
}

main.dart

import ‘package:flutter/material.dart’;
import ‘package:flutter_provider/blocs/counter_bloc.dart’;
import ‘package:flutter_provider/pages/counter.dart’;
import ‘package:provider/provider.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CounterBloc()),
],

child: MaterialApp(
home: CounterPage(),
),

);
}
}

まとめ

めちゃめちゃシンプルなアプリの完成です!ノンプログラマーの私には説明が書かれていてもわからなかったので、一番シンプルなコードをコピペして使い回ししようと思います♪

34歳から始めるオンライン学習

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

関連記事

[Flutter]実機でデバッグしてみる(Android編)

[Flutter]縦棒&横棒グラフ(チャート)

[Dialogflow]JSでダイアログフローを動かしてみる

[Python]JupyterLabの使い方

[Flutter]へっぽこプログラミング!またエラー出た!

Progate(プロゲート)完了したら何したらいい?