はじめに
近年、スマートフォンアプリにおいてダークモードの導入が人気となっています。ダークモードは、目への負担を軽減したり、バッテリー消費を抑える効果があるため、多くのユーザーに支持されています。Flutterでのアプリ開発でも簡単にダークモードを導入することができるので、今回はその基本的な設定方法とカスタマイズ手順について解説していきます。
ダークモードの基本設定
Flutterでは、MaterialAppウィジェットに設定を追加するだけで、アプリ全体にダークモードを導入できます。まずは基本設定として、以下のコードを参考にしてみましょう。
ステップ1: ThemeData を使ったテーマ設定
Flutterには、ライトモードとダークモードを切り替える機能が標準で備わっています。ダークモードのテーマは、ThemeData.dark()を利用します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Dark Mode Demo',
theme: ThemeData.light(), // ライトモードの設定
darkTheme: ThemeData.dark(), // ダークモードの設定
themeMode: ThemeMode.system, // システムの設定に従って自動で切り替え
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ダークモードのデモ"),
),
body: Center(
child: Text("ここにコンテンツが表示されます"),
),
);
}
}
重要なプロパティの説明
- theme: ライトモードのテーマを指定します。デフォルトでは
ThemeData.light()が利用されます。 - darkTheme: ダークモードのテーマを指定します。デフォルトで
ThemeData.dark()が提供されているので、これを指定します。 - themeMode: ダークモードとライトモードの切り替え方法を設定します。
ThemeMode.systemとすることで、ユーザーの端末設定に従ってモードが切り替わります。
このコードを実行すると、デバイスの設定に従い、アプリが自動的にライトモードまたはダークモードで表示されます。
ダークモード用のカスタムテーマを作成する
デフォルトのダークモードテーマも便利ですが、独自のカラーパレットやデザインを使用して、さらにアプリの見た目をカスタマイズすることが可能です。
カスタム ThemeData を定義する
以下のように、ダークモード用のカスタムテーマを設定します。
final ThemeData lightTheme = ThemeData(
brightness: Brightness.light,
primaryColor: Colors.blue,
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(color: Colors.blue),
);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.teal,
scaffoldBackgroundColor: Colors.black,
appBarTheme: AppBarTheme(color: Colors.teal),
);
カスタムテーマを MaterialApp に適用する
カスタムテーマをMaterialAppに適用し、ユーザーが選択したモードでテーマが自動的に切り替わるようにします。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Dark Mode',
theme: lightTheme,
darkTheme: darkTheme,
themeMode: ThemeMode.system,
home: HomeScreen(),
);
}
}ダークモード対応のウィジェット設定
ダークモードを導入した際に、特定のウィジェットで見やすさを保つために個別のスタイル調整が必要になる場合があります。
テキストカラーの調整
ダークモードでは、Textウィジェットのカラーも暗い背景に合わせて調整します。
Text(
"ダークモードに対応したテキスト",
style: TextStyle(color: Theme.of(context).colorScheme.onBackground),
)アイコンカラーの調整
アイコンもダークモードで見やすくするためにカラーを変更します。
Icon(
Icons.home,
color: Theme.of(context).iconTheme.color,
)ダークモードの切り替え機能を実装する
システムの設定に従うのではなく、アプリ内でダークモードとライトモードを切り替えたい場合は、以下のようなスイッチを実装します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ThemeMode _themeMode = ThemeMode.light;
void _toggleTheme() {
setState(() {
_themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dark Mode Toggle',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: _themeMode,
home: HomeScreen(toggleTheme: _toggleTheme),
);
}
}
class HomeScreen extends StatelessWidget {
final VoidCallback toggleTheme;
HomeScreen({required this.toggleTheme});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ダークモード切り替え"),
),
body: Center(
child: ElevatedButton(
onPressed: toggleTheme,
child: Text("テーマ切り替え"),
),
),
);
}
}このコードでは、ボタンをタップすることでダークモードとライトモードを切り替えることができます。ThemeModeの状態をThemeMode.lightとThemeMode.darkでトグルし、スイッチ機能を提供しています。
ダークモード導入時の注意点
見やすさを優先する
ダークモード導入の際は、背景や文字色のコントラストを意識して見やすさを保つことが大切です。特に、白い文字と暗い背景の組み合わせは疲れにくいため、適切な配色を選びましょう。
使いすぎに注意
ダークモードは、必ずしもすべてのUIに適用する必要はありません。視認性やデザインが悪くなる場合は、ライトモード専用のカラー設定も検討しましょう。
まとめ
Flutterでダークモードを導入する方法について解説しました。MaterialAppのテーマ設定を変更するだけで簡単にダークモードを導入でき、カスタマイズも自由に行えます。ユーザーにとって快適なアプリを提供するために、ぜひダークモードを活用してみてください。
ダークモードの対応は、アプリの使いやすさや見やすさに直結するため、工夫を重ねながら最適なデザインを目指していきましょう。
コメント