Zenn
🫠

flutter_flavor

2024/01/21に公開
Flutter
Dart
flavor
tech

Overview

Flutterで環境分けなるものをして、本番用とテスト用にプロジェクトを分けてビルドをしたい。その設定を簡単にできるパッケージがあるらしい???

これです↓
https://pub.dev/packages/flutter_flavor

この間の案件で使った気がする???

公式にも情報があるが、どれがいいのやら...
https://docs.flutter.dev/deployment/flavors

summary

まずは作ってみよう!

環境を切り替えて使う本番用のmain_prod.dartとテスト用のmain_dev.dartを作成します。

ただのカウンターアプリです

🚀本番用

import 'package:flutter/material.dart';

import 'package:flutter_flavor/flutter_flavor.dart';

void main() {
  FlavorConfig(
    name: "PRODUCTION",
    color: Colors.red,
    location: BannerLocation.bottomStart,
    variables: {
      "counter": 5,
      "baseUrl": "https://www.example.com",
    },
  );
  return runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return FlavorBanner(
      color: Colors.blue,
      location: BannerLocation.topStart,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: const MyHomePage(title: 'Flutter Prod'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = FlavorConfig.instance.variables["counter"];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: FlavorConfig.instance.color,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '本番用アプリ:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

🔧テスト用

import 'package:flutter/material.dart';

import 'package:flutter_flavor/flutter_flavor.dart';

void main() {
  FlavorConfig(
    name: "DEVELOP",
    color: Colors.green,
    location: BannerLocation.bottomStart,
    variables: {
      "counter": 5,
      "baseUrl": "https://www.example.com",
    },
  );
  return runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return FlavorBanner(
      color: Colors.blue,
      location: BannerLocation.topStart,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: const MyHomePage(title: 'Flutter Dev'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = FlavorConfig.instance.variables["counter"];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: FlavorConfig.instance.color,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'テスト用アプリ:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

launch.jsonを作成する



programというkeyにlibディレクトリ配下の本番用とテスト用のファイルのパスを指定する。
launch.jsonのファイルを以下のものに変更すればOK!

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "PROD-Flavor",
        "program": "lib/main_prod.dart",
        "request": "launch",
        "type": "dart"
      },
      {
        "name": "DEV-Flavor",
        "program": "lib/main_dev.dart",
        "request": "launch",
        "type": "dart"
      }
    ]
  }

本番用のビルド:

テスト用のビルド:

thoughts

今回は、ビルドされるファイルを切り替えるだけですが、flavorの使い方について学んでみました。dart-defineなるものありますが、あれはさっぱりわからないです😇

SESで働いて思いますが、社内ドキュメントが整備されていない職場は、設定方法のREADME.mdもないので炎上しちゃうもんね〜🔥

なので、前職の人が辞めたり不幸があって事故に遭って怪我をしたとか死んでしまったら、設定方法わからないので、Githubかconfluenceに設定方法をスクリーンショットと一緒に残しておきましょう📄

これが完成品

Discussion