[Flutter]Flutter Widget of the Week「#115 path_provider」、「#116 get_it」、「#117 Baseline」

はじめに

前回はFlutter Widget of the Weekの「#112 cached_network_image」、「#113 GestureDetector」、「#114 freezed」を紹介しました。

今回はその続きで「#115 path_provider」、「#116 get_it」、「#117 Baseline」の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.3.9

記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。

#115 path_provider

path_providerとは

デバイスのファイルシステムにアクセスができるパッケージです。

サンプルコード

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

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

  @override
  State<SamplePage115> createState() => _SamplePage115State();
}

class _SamplePage115State extends State<SamplePage115> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('path_provider'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('getApplicationDocumentsDirectory'),
            FutureBuilder(
              future: getApplicationDocumentsDirectory(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                }
                if (snapshot.hasError) {
                  return const Icon(
                    Icons.error,
                    color: Colors.red,
                  );
                }
                return Text(snapshot.data!.path);
              },
            ),
            const SizedBox(height: 20),
            const Text('getApplicationSupportDirectory'),
            FutureBuilder(
              future: getApplicationSupportDirectory(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                }
                if (snapshot.hasError) {
                  return const Icon(
                    Icons.error,
                    color: Colors.red,
                  );
                }
                return Text(snapshot.data!.path);
              },
            ),
          ],
        ),
      ),
    );
  }
}

結果

動画

公式リファレンス

path_provider | Flutter package

Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data director...

#116 get_it

get_itとは

サービスロケーターのパッケージです。

これを使うことで依存性の注入等が簡単にできます。

サンプルコード

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

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

  @override
  State<SamplePage116> createState() => _SamplePage116State();
}

class _SamplePage116State extends State<SamplePage116> {
  @override
  void initState() {
    super.initState();

    GetIt.I.registerSingleton<SamplePage116Repository>(
      SamplePage116RepositoryImpl(),
    );
  }

  @override
  void dispose() {
    GetIt.I.unregister<SamplePage116Repository>();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final message = GetIt.I.get<SamplePage116Repository>().getMessage();
    return Scaffold(
      appBar: AppBar(
        title: const Text('get_it'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

abstract class SamplePage116Repository {
  String getMessage() {
    throw UnimplementedError();
  }
}

class SamplePage116RepositoryImpl extends SamplePage116Repository {
  @override
  String getMessage() {
    return 'SamplePage116RepositoryImpl.getMessage';
  }
}

結果

動画

公式リファレンス

get_it | Dart package

Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the con...

#117 Baseline

Baselineとは

その名の通りテキストのベースラインを設定できるウィジェットです。

サンプルコード

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Baseline'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            ColoredBox(
              color: Colors.grey,
              child: Text('Hello World!'),
            ),
            SizedBox(height: 20),
            ColoredBox(
              color: Colors.grey,
              child: Baseline(
                baseline: 100,
                baselineType: TextBaseline.alphabetic,
                child: Text('Hello World!'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}