はじめに
前回はFlutter Widget of the Weekの「#136 FutureBuilder(Take 2)」、「#137 NavigationBar」、「#138 go_router」を紹介しました。
今回はその続きで「#139 firebase_remote_config」、「#140 flame」、「#141 RawMagnifier」の3つです。
前回の記事はこちら
またGitHubにも公開しています。
GitHub - nobushiueshi/flutter_widget_of_the_week
Contribute to nobushiueshi/flutter_widget_of_the_week development by creating an account on GitHub.
github.com
Flutter Widget of the Week
環境
- Flutter 3.7.7
記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。
#139 firebase_remote_config
firebase_remote_configとは
新機能を試すしたりするA/Bテストする際に役に立つパッケージです。
それ以外にもアプリ内の機能を動的に変更するために使われたりします。
サンプルコード
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:flutter/material.dart';
class SamplePage139 extends StatefulWidget {
const SamplePage139({
super.key,
});
@override
SamplePage139State createState() => SamplePage139State();
}
class SamplePage139State extends State<SamplePage139> {
String message = '';
@override
void initState() {
super.initState();
Future(() async {
final remoteConfig = FirebaseRemoteConfig.instance;
await remoteConfig.setConfigSettings(
RemoteConfigSettings(
fetchTimeout: const Duration(minutes: 1),
minimumFetchInterval: const Duration(minutes: 2),
),
);
await remoteConfig.setDefaults(const {
'message_text': 'Hello, Flutter!',
});
await remoteConfig.fetchAndActivate();
setState(() {
message = remoteConfig.getString('message_text');
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('firebase_remote_config'),
),
body: SafeArea(
child: Center(
child: Text(message),
),
),
);
}
}
結果
動画
公式リファレンス
firebase_remote_config | Flutter package
Flutter plugin for Firebase Remote Config. Update your application look and feel and behavior without re-releasing.
pub.dev
#140 flame
flameとは
Flutterでゲームを作るために使えるパッケージです。
サンプルコード
リポジトリに含めると複雑になってしまうので、今回は公式のサンプルを見てください。
GitHub - flame-engine/flame: A Flutter based game engine.
A Flutter based game engine. Contribute to flame-engine/flame development by creating an account on GitHub.
github.com
結果
なし
動画
公式リファレンス
flame | Flutter package
A minimalist Flutter game engine, provides a nice set of somewhat independent modules you can choose from.
pub.dev
#141 RawMagnifier
RawMagnifierとは
RawMagnifierは拡大鏡の機能をもったウィジェットです。
サンプルコード
import 'package:flutter/material.dart';
class SamplePage141 extends StatefulWidget {
const SamplePage141({
super.key,
});
@override
State<SamplePage141> createState() => _SamplePage141State();
}
class _SamplePage141State extends State<SamplePage141> {
Offset? dragGesturePosition;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('RawMagnifier'),
centerTitle: true,
),
body: SafeArea(
child: Center(
child: Stack(
children: [
GestureDetector(
onPanUpdate: (details) {
setState(() {
dragGesturePosition = details.localPosition;
});
},
onPanEnd: (details) {
setState(() {
dragGesturePosition = null;
});
},
child: const FlutterLogo(
size: 256,
),
),
if (dragGesturePosition != null)
Positioned(
left: dragGesturePosition!.dx,
top: dragGesturePosition!.dy,
child: const RawMagnifier(
decoration: MagnifierDecoration(
shape: StarBorder(
side: BorderSide(
color: Colors.pink,
width: 3,
),
),
),
magnificationScale: 2,
size: Size(128, 128),
),
),
],
),
),
),
);
}
}結果
動画
公式リファレンス
RawMagnifier class - widgets library - Dart API
API docs for the RawMagnifier class from the widgets library, for the Dart programming language.
api.flutter.dev
さいごに
やっと追いついた。。。
おすすめ参考書
リンク
GitHub - nobushiueshi/flutter_widget_of_the_week
Contribute to nobushiueshi/flutter_widget_of_the_week development by creating an account on GitHub.
github.com
コメント