【 f_count 】自動カウントするログ出力を使おう！【 Flutter 】

f_count ってどんなパッケージなんだろう？

Flutterのログ出力で描画回数をカウントしたいんだけど、
いい方法ないかしら？

本記事ではそんな疑問にお答えします。

Flutterで、自動カウントするログ出力を使えるようにするパッケージ、
f_count パッケージを紹介します！

以下使用例のGIFとなります。

本記事では使い方から使用例の紹介までを行います。

ぜひ読んでみて下さい！

基本的な使い方
1. 準備
2. 実装
使用例
まとめ
編集後記（2022/8/3）

基本的な使い方

準備

まず準備として、パッケージのインストールと、
Dartファイルへのインポート文の追加を行います。

パッケージのインストール

CLI(macならターミナル)で、自分のプロジェクトのルートにて
以下のコマンドを実行しパッケージをインストールします。

flutter pub add f_count

パッケージのインポート

ログ出力したいDartファイルの上部に以下のインポート文を追加し、
パッケージをインポートします。

import 'package:f_count/f_count.dart';

実装

実装方法について解説します。

実装はとても簡単でログ出力したい場所に、fCount(label: 'Sample'); を置くだけです。
(‘Sample’の部分は自分の好きな文字列を入れることが可能です。)

  @override
  Widget build(BuildContext context) {
    fCount(label: 'Sample');
    return Scaffold(

これにより、以下の画像のようなログが出力されます。

カウントはラベルごとに行われます。

  @override
  Widget build(BuildContext context) {
    fCount(label: 'Sample');
    fCount(label: 'Test');
    return Scaffold(

基本的な使い方は以上です！

使用例

使用例のサンプルコードはこちらです。

シンプルに、カウンターをWidgetで切り出した場合の描画範囲をチェックできるアプリです。

import 'package:f_count/f_count.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    fCount(label: 'Bad');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('Bad Increment'),
            ),
            const GoodCounter(),
          ],
        ),
      ),
    );
  }
}

class GoodCounter extends StatefulWidget {
  const GoodCounter({super.key});

  @override
  State<GoodCounter> createState() => _GoodCounterState();
}

class _GoodCounterState extends State<GoodCounter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    fCount(label: 'Good');
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Good Increment'),
        ),
      ],
    );
  }
}

このアプリのGIFは以下となります。
Goodのボタンを押した時にBadのログが表示されないので、
描画範囲を抑えられていることがわかります。