7-1. Flutterプロジェクトの作成
Flutterは、Googleが開発したモバイルアプリケーションフレームワークで、iOSやAndroid向けの美しいネイティブアプリケーションを構築することができます。
7-1-1. Flutterのインストール
Flutterをインストールしていない場合は、以下の手順に従ってインストールしてください。
(1) Flutter公式サイトからFlutter SDKをダウンロードします：Flutterダウンロードページ
(2) ダウンロードしたZIPファイルを適当な場所に解凍します（例：C:\src\flutter）。
(3) 解凍したFlutter SDKのパスを環境変数に追加します。
①「スタートメニュー」を右クリックして「システム」を選択します。
②「システム情報」ウィンドウの左側メニューから「システムの詳細設定」をクリックします。
③「システムのプロパティ」ウィンドウで「環境変数」ボタンをクリックします。
④「システム環境変数」セクションの「Path」を選択し、「編集」ボタンをクリックします。
⑤「新規」ボタンをクリックし、C:\src\flutter\binを追加します。
(4) コマンドプロンプトを開き、以下のコマンドを実行してFlutterが正しくインストールされているか確認します：
flutter --version7-1- 2. Flutterプロジェクトの作成
・コマンドプロンプトを開き、プロジェクトを作成したいディレクトリに移動します。
・以下のコマンドを実行してFlutterプロジェクトを作成します：
flutter create my_flutter_app・プロジェクトのディレクトリに移動します：
cd my_flutter_app・Visual Studio Codeでプロジェクトを開きます：
code .7-2. Dartでのウィジェットの使用方法
Flutterでは、ウィジェットが基本的なUI構成要素です。ウィジェットは、画面に表示される要素や、レイアウト、スタイリング、インタラクションを定義します。
7-2-1. 基本的なウィジェットの使用
Flutterのアプリケーションは、ウィジェットツリーとして構成されます。以下は、シンプルなFlutterアプリケーションの例です。
例1: シンプルなFlutterアプリケーション
lib/main.dartファイルを開き、以下のコードを入力します：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}7-2-2. ステートフルウィジェットの使用
ステートフルウィジェットは、内部状態を持つウィジェットです。状態が変更されると、ウィジェットは再構築されます。
例2: カウンターアプリケーション
lib/main.dartファイルを開き、以下のコードを入力します：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Counter(),
),
);
}
}
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_count',
style: Theme.of(context).textTheme.headline4,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _increment,
child: Text('Increment'),
),
],
),
);
}
}7-3. FlutterとDartのベストプラクティス
7-3-1. コードの構造化
ディレクトリ構成：
コードを整理するために、適切なディレクトリ構成を使用します。例えば、models、widgets、screens、servicesなどのディレクトリを作成します。
7-3-2. ステート管理
ステート管理の選択：
小規模なアプリケーションでは、StatefulWidgetを使用して状態を管理できます。中規模から大規模なアプリケーションでは、Provider、Riverpod、Blocなどのステート管理ライブラリを使用することを検討します。
7-3-3. コードの再利用
ウィジェットの分割：
UIを構成するウィジェットを小さな再利用可能なコンポーネントに分割します。これにより、コードの再利用性が向上し、管理が容易になります。
7-3-4. テストの追加
- ユニットテスト：ビジネスロジックやユーティリティ関数に対してユニットテストを追加します。
- ウィジェットテスト：UIコンポーネントの動作をテストするためにウィジェットテストを追加します。
例3: ユニットテストの追加
・test/counter_test.dartファイルを作成し、以下のコードを入力します：
import 'package:flutter_test/flutter_test.dart';
void main() {
test('Counter increments smoke test', () {
int counter = 0;
counter++;
expect(counter, 1);
});
}・テストを実行するには、以下のコマンドを使用します：
flutter test
ピンバック: ６.Dartのライブラリとパッケージ管理 - flutter.com