はじめに

Flutterとは

Flutterは、Googleが開発したオープンソースのUIソフトウェア開発キット（SDK）です。単一のコードベースから、Android、iOS、Web、デスクトップ向けのネイティブコンパイルされたアプリケーションを作成することができます。

Flutterの特徴

クロスプラットフォーム開発: 1つのコードベースで複数のプラットフォーム向けにアプリケーションを開発できます。
高速な開発: ホットリロード機能により、コードの変更をリアルタイムで確認できます。
カスタマイズ可能なウィジェット: 美しく、ネイティブに近いユーザーインターフェースを構築できます。
高性能: FlutterはDartを使用し、ネイティブにコンパイルされるため、高いパフォーマンスを実現します。

開発環境のセットアップ

Flutterの開発を始めるには、以下の手順で環境をセットアップします。

Flutter SDKのダウンロードとインストール

Flutter公式サイトから、お使いのOSに合わたFlutter SDKをダウンロードします。
ダウンロードしたアーカイブを解凍し、任意の場所に配置します。

環境変数の設定

FlutterのbinディレクトリをPATH環境変数に追加します。

Windows: システム環境変数の編集から、PATHにFlutterのbinディレクトリのパスを追加。
macOS/Linux: ~/.bash_profile または ~/.zshrc に以下を追加：

export PATH="$PATH:[Flutterのインストールパス]/flutter/bin"

依存関係のインストール

ターミナルで以下のコマンドを実行し、必要な依存関係をインストールします。

flutter doctor

このコマンドは、環境に不足しているものがあれば指摘してくれます。

IDEのセットアップ

推奨されるIDEは以下の2つです：

Android Studio (IntelliJ)
Visual Studio Code

それぞれのIDEに、Flutterプラグインとdartプラグインをインストールしてください。

エミュレータのセットアップ

iOSの場合: Xcodeをインストールし、iOSシミュレータをセットアップします。
Androidの場合: Android Studioを使用してAVD (Android Virtual Device)を作成します。

これで、Flutter開発の準備が整いました。次の章では、Flutterアプリケーションの基礎となるDartについて学んでいきます。

Dartの基礎

Dartは、Flutterアプリケーション開発の基盤となる言語です。この章では、Dartの主要な概念と構文を学びます。

変数と型

Dartは静的型付け言語ですが、型推論も可能です。

変数宣言

// 型を明示的に指定
int age = 30;
String name = 'John';

// 型推論を使用
var score = 100; // int型と推論される
var isActive = true; // bool型と推論される

// 定数
final PI = 3.14159;
const GRAVITY = 9.8;

基本的なデータ型

int: 整数
double: 浮動小数点数
String: 文字列
bool: 真偽値
List: 配列
Map: キーと値のペア

List<String> fruits = ['apple', 'banana', 'orange'];
Map<String, int> ages = {'Alice': 25, 'Bob': 30};

関数

Dartの関数は第一級オブジェクトで、変数に代入したり、他の関数に渡したりできます。

関数の定義と呼び出し

int add(int a, int b) {
  return a + b;
}

// 関数の呼び出し
int result = add(5, 3); // result = 8

アロー関数

単一の式を返す関数は、アロー構文を使って簡潔に書けます。

int multiply(int a, int b) => a * b;

オプショナルパラメータ

Dartでは、位置引数と名前付き引数の両方をオプショナルにできます。

// 位置引数（角括弧で囲む）
String greet(String name, [String? greeting]) {
  greeting ??= 'Hello';
  return '$greeting, $name!';
}

// 名前付き引数（波括弧で囲む）
void printPerson({String? name, int? age}) {
  print('Name: $name, Age: $age');
}

// 関数の呼び出し
print(greet('Alice')); // Hello, Alice!
print(greet('Bob', 'Hi')); // Hi, Bob!
printPerson(name: 'Charlie', age: 30);

クラスとオブジェクト指向プログラミング

Dartは完全なオブジェクト指向言語です。

クラスの定義

class Person {
  String name;
  int age;

  // コンストラクタ
  Person(this.name, this.age);

  // メソッド
  void introduce() {
    print('My name is $name and I am $age years old.');
  }
}

// クラスの使用
var person = Person('Alice', 25);
person.introduce();

継承

Dartでは、extendsキーワードを使用してクラスを継承します。

class Student extends Person {
  String school;

  Student(String name, int age, this.school) : super(name, age);

  @override
  void introduce() {
    super.introduce();
    print('I study at $school.');
  }
}

Getter と Setter

プロパティへのアクセスをカスタマイズできます。

class Rectangle {
  double _width, _height;

  Rectangle(this._width, this._height);

  // Getter
  double get area => _width * _height;

  // Setter
  set width(double value) {
    if (value > 0) _width = value;
  }
}

非同期プログラミング

Dartはasyncとawaitキーワードを使用して、非同期プログラミングをサポートしています。

Future<String> fetchUserData() async {
  // ネットワークリクエストをシミュレート
  await Future.delayed(Duration(seconds: 2));
  return 'User data';
}

void main() async {
  print('Fetching user data...');
  var userData = await fetchUserData();
  print(userData);
}

これらの基本的な概念を理解することで、Flutterアプリケーションの開発に必要なDartの基礎が身につきます。次の章では、これらの知識を活用してFlutterの基本概念について学んでいきます。

Flutterの基本概念

この章では、Flutterアプリケーション開発の基本となる重要な概念について学びます。

Flutterでは、ほぼすべてのものがWidgetです。Widgetは、ユーザーインターフェースを構築するための基本的な構成要素です。

視覚的Widget: テキスト、ボタン、画像など
レイアウトWidget: Row、Column、Stackなど
構造的Widget: MaterialApp、Scaffoldなど

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My First Flutter App')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

StatelessWidgetとStatefulWidget

Flutterには、2種類の基本的なWidgetがあります：StatelessWidgetとStatefulWidgetです。

StatelessWidget

StatelessWidgetは、状態を持たないWidgetです。一度描画されると、その後変更されることはありません。

class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }
}

StatefulWidget

StatefulWidgetは、動的に変更可能な状態を持つWidgetです。

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

ビルドコンテキストとツリー構造

ビルドコンテキスト

BuildContextは、Widgetツリー内のWidgetの位置に関する情報を提供するオブジェクトです。これは、親Widgetの情報にアクセスしたり、テーマデータを取得したりするのに使用されます。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ビルドコンテキストを使用してテーマデータにアクセス
    final textTheme = Theme.of(context).textTheme;
    
    return Text(
      'Hello',
      style: textTheme.headline4,
    );
  }
}

ウィジェットツリー

Flutterアプリケーションは、ネストされたWidgetのツリー構造として表現されます。各Widgetは、親Widgetのbuildメソッド内で作成されます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Widget Tree Example')),
        body: Column(
          children: [
            Text('First child'),
            Container(
              child: Row(
                children: [
                  Icon(Icons.star),
                  Text('Nested child'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

この例では、MaterialAppが最上位のWidgetで、その子にScaffold、さらにその下にColumnとRowがあり、それぞれが他のWidgetを含んでいます。

キー (Keys)

Keyは、Widgetの識別と状態の保持に使用されます。特に、動的にWidgetを追加・削除する場合に重要です。

class MyListItem extends StatelessWidget {
  final String text;

  MyListItem({required this.text, required Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(title: Text(text));
  }
}

// 使用例
ListView(
  children: [
    MyListItem(text: 'Item 1', key: UniqueKey()),
    MyListItem(text: 'Item 2', key: UniqueKey()),
  ],
)

これらの基本概念を理解することで、Flutterアプリケーションの構造と動作原理をより深く把握できるようになります。次の章では、これらの知識を活用してUIデザインについて学んでいきます。

UIデザイン

この章では、Flutterを使用して魅力的で機能的なユーザーインターフェース（UI）を設計・実装する方法について学びます。

Flutterには、UIを構築するための様々なレイアウトWidgetが用意されています。以下に主要なものを紹介します。

Container

Containerは、パディング、マージン、境界線、背景色などを設定できる汎用的なWidgetです。

Container(
  padding: EdgeInsets.all(8.0),
  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(5.0),
  ),
  child: Text('Hello, Flutter!'),
)

Row と Column

RowとColumnは、子Widgetを水平方向（Row）または垂直方向（Column）に配置します。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('First item'),
    Text('Second item'),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Icon(Icons.star),
        Icon(Icons.star),
        Icon(Icons.star),
      ],
    ),
  ],
)

Stack

Stackを使用すると、Widgetを重ねて表示できます。

Stack(
  children: [
    Image.asset('background.jpg'),
    Positioned(
      bottom: 10,
      right: 10,
      child: Text('Overlay Text'),
    ),
  ],
)

ListView

ListViewは、スクロール可能なリストを作成します。

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

マテリアルデザインとCupertino

Flutterは、GoogleのマテリアルデザインとAppleのCupertinoデザインの両方をサポートしています。

マテリアルデザイン

マテリアルデザインを使用するには、MaterialAppをアプリのルートWidgetとして使用します。

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Material App')),
        body: Center(child: Text('Hello, Material!')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Cupertinoデザイン

iOS風のデザインを使用するには、CupertinoAppを使用します。

import 'package:flutter/cupertino.dart';

class MyCupertinoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: CupertinoThemeData(primaryColor: CupertinoColors.activeBlue),
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(middle: Text('Cupertino App')),
        child: Center(child: Text('Hello, Cupertino!')),
      ),
    );
  }
}

複雑なUIを管理しやすくするために、カスタムWidgetを作成することができます。

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  CustomButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        onPrimary: Colors.white,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
      ),
      onPressed: onPressed,
      child: Text(text, style: TextStyle(fontSize: 18)),
    );
  }
}

// 使用例
CustomButton(
  text: 'Click me!',
  onPressed: () {
    print('Button pressed!');
  },
)

レスポンシブデザイン

異なる画面サイズに対応するレスポンシブなデザインを作成することも重要です。

class ResponsiveLayout extends StatelessWidget {
  final Widget mobileBody;
  final Widget desktopBody;

  ResponsiveLayout({required this.mobileBody, required this.desktopBody});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return mobileBody;
        } else {
          return desktopBody;
        }
      },
    );
  }
}

// 使用例
ResponsiveLayout(
  mobileBody: MobileLayout(),
  desktopBody: DesktopLayout(),
)

これらの概念とテクニックを活用することで、魅力的で機能的なUIを設計・実装することができます。次の章では、アプリケーションの状態管理について学んでいきます。

ステート管理

この章では、Flutterアプリケーションにおける状態（state）の管理方法について学びます。適切なステート管理は、アプリケーションの保守性、スケーラビリティ、パフォーマンスに大きな影響を与えます。

setState

setStateは、Flutterが提供する最も基本的なステート管理方法です。主に小規模なウィジェット内での状態更新に使用されます。

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

InheritedWidget

InheritedWidgetは、ウィジェットツリーを通じて効率的にデータを下位のウィジェットに渡すための方法です。これは、Providerなどの高度なステート管理ソリューションの基礎となっています。

class CounterProvider extends InheritedWidget {
  final int count;
  final Function increment;

  CounterProvider({
    required this.count,
    required this.increment,
    required Widget child,
  }) : super(child: child);

  static CounterProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterProvider>()!;
  }

  @override
  bool updateShouldNotify(CounterProvider oldWidget) {
    return count != oldWidget.count;
  }
}

// 使用例
class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      count: _count,
      increment: _increment,
      child: // ... 子ウィジェット
    );
  }
}

// 子ウィジェットでの使用
class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = CounterProvider.of(context);
    return Text('Count: ${counter.count}');
  }
}

Provider

Providerは、InheritedWidgetを基にした、より使いやすいステート管理ソリューションです。依存性注入とステート管理を簡単に行うことができます。

まず、pubspec.yamlにproviderパッケージを追加します：

dependencies:
  provider: ^6.0.0

そして、以下のように使用します：

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

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, counter, child) => Text(
            'Count: ${counter.count}',
            style: Theme.of(context).textTheme.headline4,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Riverpod（オプション）

Riverpodは、Providerの作者によって開発された、Providerの問題点を解決するための新しいステート管理ソリューションです。Riverpodは型安全性が高く、プロバイダの衝突を防ぐことができます。

まず、pubspec.yamlにflutter_riverpodパッケージを追加します：

dependencies:
  flutter_riverpod: ^2.0.0

そして、以下のように使用します：

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

final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter());

class Counter extends StateNotifier<int> {
  Counter() : super(0);

  void increment() => state++;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Text(
          'Count: $count',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

これらのステート管理手法を理解し、適切に使用することで、効率的で保守性の高いFlutterアプリケーションを開発することができます。次の章では、ナビゲーションとルーティングについて学んでいきます。

ナビゲーションとルーティング

この章では、Flutterアプリケーションにおける画面遷移（ナビゲーション）と路線管理（ルーティング）について学びます。適切なナビゲーションとルーティングは、ユーザーエクスペリエンスを向上させ、アプリケーションの構造を整理するのに役立ちます。

基本的なナビゲーション

Flutterでは、Navigatorクラスを使用して画面遷移を管理します。

新しい画面への遷移

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

画面遷移時のアニメーション

カスタムのトランジションアニメーションを作成することもできます：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

名前付きルート

大規模なアプリケーションでは、名前付きルートを使用してナビゲーションを管理するのが一般的です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

// 使用例
Navigator.pushNamed(context, '/second');

onGenerateRoute

動的なルーティングが必要な場合は、onGenerateRouteを使用します：

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(builder: (context) => HomePage());
    }
    
    var uri = Uri.parse(settings.name!);
    if (uri.pathSegments.length == 2 && uri.pathSegments.first == 'user') {
      var id = uri.pathSegments[1];
      return MaterialPageRoute(builder: (context) => UserPage(id: id));
    }
    
    return MaterialPageRoute(builder: (context) => UnknownPage());
  },
)

// 使用例
Navigator.pushNamed(context, '/user/123');

引数の受け渡し

画面遷移時に引数を渡すことができます。

ルート生成時に引数を渡す

class UserPage extends StatelessWidget {
  final String userId;

  UserPage({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Page')),
      body: Center(child: Text('User ID: $userId')),
    );
  }
}

// 使用例
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => UserPage(userId: '123'),
  ),
);

名前付きルートで引数を渡す

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/user') {
      final args = settings.arguments as Map<String, dynamic>;
      return MaterialPageRoute(
        builder: (context) {
          return UserPage(userId: args['userId']);
        },
      );
    }
    // その他のルート処理
  },
)

// 使用例
Navigator.pushNamed(
  context,
  '/user',
  arguments: {'userId': '123'},
);

DeepLinkの処理

モバイルアプリでは、外部からのDeepLinkを処理することも重要です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        // DeepLinkの処理
        if (settings.name != null) {
          final uri = Uri.parse(settings.name!);
          if (uri.pathSegments.length == 2 && uri.pathSegments.first == 'product') {
            final productId = uri.pathSegments[1];
            return MaterialPageRoute(
              builder: (context) => ProductPage(productId: productId),
            );
          }
        }
        // 通常のルーティング処理
        // ...
      },
    );
  }
}

これらのナビゲーションとルーティングの技術を使用することで、複雑なアプリケーション構造を効率的に管理し、スムーズな画面遷移を実現することができます。次の章では、非同期プログラミングについて学んでいきます。

非同期プログラミング

この章では、Flutterアプリケーションにおける非同期プログラミングについて学びます。非同期プログラミングは、ネットワーク要求、ファイル操作、データベース操作など、時間のかかる処理を効率的に行うために不可欠です。

Futureとasync/await

Futureは、将来のある時点で完了する処理の結果を表します。asyncとawaitキーワードを使用することで、非同期コードを同期的に書くように見せることができます。

Future

Future<String> fetchUserName() {
  // サーバーからユーザー名を取得する処理をシミュレート
  return Future.delayed(Duration(seconds: 2), () => 'John Doe');
}

void main() {
  print('Fetching user name...');
  fetchUserName().then((name) {
    print('User name: $name');
  }).catchError((error) {
    print('Error: $error');
  });
  print('This will print before the user name');
}

async/await

Future<void> printUserName() async {
  try {
    print('Fetching user name...');
    String name = await fetchUserName();
    print('User name: $name');
  } catch (e) {
    print('Error: $e');
  }
}

void main() async {
  await printUserName();
  print('This will print after the user name');
}

StreamとStreamBuilder

Streamは、時間の経過とともに複数の値を非同期に生成するデータのシーケンスです。StreamBuilderは、Streamからのデータに基づいてUIを構築するのに便利なWidgetです。

Stream

Stream<int> countStream(int max) async* {
  for (int i = 1; i <= max; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

void main() {
  Stream<int> stream = countStream(5);
  stream.listen(
    (data) => print('Received: $data'),
    onError: (error) => print('Error: $error'),
    onDone: () => print('Stream is done'),
  );
}

StreamBuilder

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: countStream(10),
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return Text('Not connected to the Stream');
          case ConnectionState.waiting:
            return Text('Waiting for values...');
          case ConnectionState.active:
            return Text('Value: ${snapshot.data}');
          case ConnectionState.done:
            return Text('Stream has finished');
        }
      },
    );
  }
}

非同期処理におけるエラーハンドリング

非同期処理では、エラーハンドリングが特に重要です。try-catchブロックやcatchErrorメソッドを使用してエラーを適切に処理します。

try-catchを使用したエラーハンドリング

Future<void> fetchData() async {
  try {
    final result = await someAsyncOperation();
    print('Result: $result');
  } catch (e) {
    print('An error occurred: $e');
  } finally {
    print('This will always execute');
  }
}

Futureチェーンでのエラーハンドリング

void fetchDataWithChain() {
  someAsyncOperation()
    .then((result) => print('Result: $result'))
    .catchError((error) => print('An error occurred: $error'))
    .whenComplete(() => print('This will always execute'));
}

複数の非同期操作の処理

複数の非同期操作を同時に処理する場合、Future.waitを使用します。

Future<void> fetchMultipleData() async {
  try {
    final results = await Future.wait([
      fetchUserProfile(),
      fetchUserPosts(),
      fetchUserFriends(),
    ]);
    print('User Profile: ${results[0]}');
    print('User Posts: ${results[1]}');
    print('User Friends: ${results[2]}');
  } catch (e) {
    print('An error occurred: $e');
  }
}

タイムアウトの処理

非同期操作にタイムアウトを設定することも重要です。

Future<String> fetchWithTimeout() {
  return fetchData().timeout(
    Duration(seconds: 5),
    onTimeout: () => throw TimeoutException('The operation timed out'),
  );
}

非同期プログラミングを適切に理解し使用することで、レスポンシブで効率的なFlutterアプリケーションを開発することができます。ユーザーインターフェイスをブロックすることなく、長時間実行される操作を処理できるようになります。次の章では、データの永続化について学んでいきます。

データの永続化

この章では、Flutterアプリケーションにおけるデータの永続化、つまりデータをデバイス上に保存し、後で取り出す方法について学びます。適切なデータ永続化手法を選択することで、アプリケーションのオフライン機能を向上させ、ユーザー体験を改善することができます。

SharedPreferences

SharedPreferencesは、キーと値のペアを使用して小規模なデータを保存するのに適しています。アプリの設定や小さな状態情報の保存に最適です。

まず、pubspec.yamlにshared_preferencesパッケージを追加します：

dependencies:
  shared_preferences: ^2.0.0

使用例

import 'package:shared_preferences/shared_preferences.dart';

class PreferencesService {
  Future<void> saveUsername(String username) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('username', username);
  }

  Future<String?> getUsername() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString('username');
  }

  Future<void> clearUsername() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('username');
  }
}

// 使用例
void main() async {
  final prefsService = PreferencesService();
  
  // ユーザー名を保存
  await prefsService.saveUsername('JohnDoe');
  
  // ユーザー名を取得
  final username = await prefsService.getUsername();
  print('Saved username: $username');
  
  // ユーザー名をクリア
  await prefsService.clearUsername();
}

SQLite（sqflite）

SQLiteは、より構造化されたデータや大量のデータを保存する必要がある場合に適しています。Flutterでは、sqfliteパッケージを使用してSQLiteデータベースにアクセスできます。

pubspec.yamlにsqfliteパッケージを追加します：

dependencies:
  sqflite: ^2.0.0+3
  path: ^1.8.0

使用例

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static final DatabaseHelper instance = DatabaseHelper._init();
  static Database? _database;

  DatabaseHelper._init();

  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDB('notes.db');
    return _database!;
  }

  Future<Database> _initDB(String filePath) async {
    final dbPath = await getDatabasesPath();
    final path = join(dbPath, filePath);

    return await openDatabase(path, version: 1, onCreate: _createDB);
  }

  Future<void> _createDB(Database db, int version) async {
    await db.execute('''
    CREATE TABLE notes(
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      content TEXT NOT NULL,
      createdAt TEXT NOT NULL
    )
    ''');
  }

  Future<int> createNote(Note note) async {
    final db = await instance.database;
    return db.insert('notes', note.toJson());
  }

  Future<Note?> readNote(int id) async {
    final db = await instance.database;
    final maps = await db.query(
      'notes',
      columns: ['id', 'title', 'content', 'createdAt'],
      where: 'id = ?',
      whereArgs: [id],
    );

    if (maps.isNotEmpty) {
      return Note.fromJson(maps.first);
    } else {
      return null;
    }
  }

  Future<List<Note>> readAllNotes() async {
    final db = await instance.database;
    final result = await db.query('notes');
    return result.map((json) => Note.fromJson(json)).toList();
  }

  Future<int> updateNote(Note note) async {
    final db = await instance.database;
    return db.update(
      'notes',
      note.toJson(),
      where: 'id = ?',
      whereArgs: [note.id],
    );
  }

  Future<int> deleteNote(int id) async {
    final db = await instance.database;
    return db.delete(
      'notes',
      where: 'id = ?',
      whereArgs: [id],
    );
  }
}

class Note {
  final int? id;
  final String title;
  final String content;
  final DateTime createdAt;

  Note({
    this.id,
    required this.title,
    required this.content,
    required this.createdAt,
  });

  Map<String, dynamic> toJson() => {
    'id': id,
    'title': title,
    'content': content,
    'createdAt': createdAt.toIso8601String(),
  };

  static Note fromJson(Map<String, dynamic> json) => Note(
    id: json['id'] as int?,
    title: json['title'] as String,
    content: json['content'] as String,
    createdAt: DateTime.parse(json['createdAt'] as String),
  );
}

Firebase（オプション）

Firebaseは、Googleが提供するモバイルおよびウェブアプリケーション開発プラットフォームです。リアルタイムデータベース、認証、クラウドストレージなど、多くの機能を提供します。

まず、Firebase プロジェクトを設定し、必要な依存関係をpubspec.yamlに追加します：

dependencies:
  firebase_core: ^2.1.0
  firebase_auth: ^4.0.2
  cloud_firestore: ^4.0.2

使用例（Firestore）

import 'package:cloud_firestore/cloud_firestore.dart';

class FirestoreService {
  final CollectionReference notesCollection = FirebaseFirestore.instance.collection('notes');

  Future<void> addNote(String title, String content) {
    return notesCollection.add({
      'title': title,
      'content': content,
      'createdAt': FieldValue.serverTimestamp(),
    });
  }

  Stream<QuerySnapshot> getNotes() {
    return notesCollection.orderBy('createdAt', descending: true).snapshots();
  }

  Future<void> updateNote(String id, String title, String content) {
    return notesCollection.doc(id).update({
      'title': title,
      'content': content,
      'updatedAt': FieldValue.serverTimestamp(),
    });
  }

  Future<void> deleteNote(String id) {
    return notesCollection.doc(id).delete();
  }
}

// 使用例
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  final firestoreService = FirestoreService();

  // ノートを追加
  await firestoreService.addNote('My First Note', 'This is the content of my first note.');

  // ノートのストリームを取得
  firestoreService.getNotes().listen((snapshot) {
    for (var doc in snapshot.docs) {
      print('${doc.id}: ${doc.data()}');
    }
  });
}

これらのデータ永続化手法を理解し、適切に使用することで、アプリケーションのデータを効率的に管理し、オフライン機能を実装することができます。プロジェクトの要件に応じて、最適な手法を選択してください。次の章では、ネットワーキングについて学んでいきます。

執筆中

ネットワーキング

HTTPリクエスト

RESTful APIの利用

JSONのパース

テスト

単体テスト

ウィジェットテスト

統合テスト

パフォーマンス最適化

メモリ管理

ウィジェットの再構築の最小化

プロファイリングツールの使用

デプロイメント

Android向けビルド

iOS向けビルド

App StoreとGoogle Play Storeへの公開

プラグインと外部パッケージの利用

pub.devの使い方

アドバンストトピック

カスタムペインティング

プラットフォーム固有のコード

アニメーション

ベストプラクティスとデザインパターン

クリーンアーキテクチャ

SOLID原則

デザインパターンの適用

外部リンク

Wikipedia

ウィキペディアにFlutterの記事があります。

Flutter - Build apps for any screen

はじめに

Flutterとは

Flutterの特徴

開発環境のセットアップ

Flutter SDKのダウンロードとインストール

環境変数の設定

依存関係のインストール

IDEのセットアップ

エミュレータのセットアップ

Dartの基礎

変数と型

変数宣言

基本的なデータ型

関数

関数の定義と呼び出し

アロー関数

オプショナルパラメータ

クラスとオブジェクト指向プログラミング

クラスの定義

継承

Getter と Setter

非同期プログラミング

Flutterの基本概念

Widgetの概要

Widgetの種類

基本的なWidgetの例

StatelessWidgetとStatefulWidget

StatelessWidget

StatefulWidget

ビルドコンテキストとツリー構造

ビルドコンテキスト

ウィジェットツリー

キー (Keys)

UIデザイン

基本的なレイアウトWidget

Container

Row と Column

Stack

ListView

マテリアルデザインとCupertino

マテリアルデザイン

Cupertinoデザイン

カスタムWidgetの作成

レスポンシブデザイン

ステート管理

setState

InheritedWidget

Provider

Riverpod（オプション）

ナビゲーションとルーティング

基本的なナビゲーション

新しい画面への遷移

画面遷移時のアニメーション

名前付きルート

onGenerateRoute

引数の受け渡し

ルート生成時に引数を渡す

名前付きルートで引数を渡す

DeepLinkの処理

非同期プログラミング

Futureとasync/await

Future

async/await

StreamとStreamBuilder

Stream

StreamBuilder

非同期処理におけるエラーハンドリング

try-catchを使用したエラーハンドリング

Futureチェーンでのエラーハンドリング

複数の非同期操作の処理

タイムアウトの処理

データの永続化

SharedPreferences

使用例

SQLite（sqflite）

使用例

Firebase（オプション）

使用例（Firestore）

執筆中

ネットワーキング