[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(),
),

);
}
}

まとめ

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

私はこのスキルを身につけて不労所得を得ています

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

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

HTML／CSSだけで自動収益化 1万円達成