[Flutter]Flutter Widget of the Week「#139 firebase_remote_config」、「#140 flame」、「#141 RawMagnifier」

はじめに

前回は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.

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.

#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.

結果

なし

動画

公式リファレンス

flame | Flutter package

A minimalist Flutter game engine, provides a nice set of somewhat independent modules you can choose from.

#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),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}