フラッターであなたのアプリをテーマにガイド

執筆Chinedu Imoh ✏️

何がテーマですか？

テーマは、それが魅力的な魅力的に見えるようにスタイルをアプリケーションのすべての一般的な名前であり、あなたの好みやニーズに合う.それはあなたのアプリを美しくするものであり、個人的な好みが異なるとして、この背後にある特定の人々を越えて変化することができます.
テキストスタイル、テキストの色、アイコンのスタイルのような要因、およびすべてのアプリケーションのテーマに貢献する.ユーザーに魅力的なアプリケーションを作るすべては、テーマから来て、フラッターテーマの知識を磨くことはあなたを作ることに向かって長い道のりを行くでしょうmore proficient Flutter developer .

何をテーマにフラッタのアプリを使用できますか？

フラッター MaterialApp デフォルトのライトブルーのテーマが付属しています.あなたがデフォルトのカウンタアプリを起動するときにそれを参照してください:それはプレーンブルーと白です.
しかし、以前に強調したように、単純なテキストとアイコンスタイルの外観を変更することから、アプリケーションをテーマにする多くの方法がありますContainer widget , TextButton , or RawMaterialButton . また、アプリケーション内の暗いテーマモードの間に複雑な切り替えがあります.
これらのすべては、アプリケーションの全体的なテーマに貢献しています.この記事は、フラッターのアプリケーションをテーマにこれらのメソッドのそれぞれに触れます.

ウィジェットとコンテナの表示

この節では、テキストウィジェットとコンテナウィジェットをスタイリングすることによってスタイルウィジェットとコンテナをフラッタにどのようにするかを説明します.フラッターはTextStyle テキストウィジェットのルックアンドフィールを変更できるいくつかのプロパティを含むクラス.

Text("I went for a walk")

フラッタレンダリング画面上のデフォルトの色、サイズ、構造、および重量.我々は今、アプリケーションの外観を強化するためにいくつかのスタイリングを追加することができます.我々は、そのプロパティを調整することによってTextStyle クラス提供.

 Text("I went for a walk", 
 style: TextStyle(
   color: Colors.blue, 
   weight: FontWeight.bold, 
   fontSize: 18,
   ),
  ),

のプロパティを調整することによってTextStyle クラス、我々は見て、テキストの感じを変更して、アプリケーションの全体的なテーマに興味を追加しました.
コンテナウィジェットをスタイリングするためのプロセスはTextStyle ; しかし、我々はここでの特性を調整することによってスタイリングを達成するBoxDecoration 次に、コンテナウィジェットの装飾パラメーターに渡されます.

Container(
  height: 48,
  margin: const EdgeInsets.all(16),
  decoration: BoxDecoration(
  color: Colors.grey[300],
  borderRadius: const BorderRadius.all(
   Radius.circular(16),
  ),
  border: Border.all(
   color: Colors.blue,
   width: 2,
  ),
  ),
 );

上で、我々は容器に色(灰色)を割り当てて、それを調節することによって、青い境界を与えましたborderColor プロパティ.それは私たちにコンテナ自体の周りの幅の2 pxである青い線を与えます.
上記のコードブロックで作られた別のスタイリングの選択は、境界半径を変更することです16 pxの円形の境界半径を与えた.それはコンテナにデフォルトコンテナとともに来る平らな端の代わりに端で優れた丸い形を提供します.
最後に、容器全体を16 pxの余白にし、容器の両側に16 pxのスペースを残した.

ThemeDataクラスの使用

我々が議論した前のシナリオの両方TextStyle クラスとコンテナウィジェット-特定の画面の単一のコンポーネントのスタイルを処理し、他のスタイルには影響しませんTextStyle クラスまたはコンテナウィジェット.
今、私たちは、色、明るさ、重量、アイコンのスタイル、およびテキストのスタイルを含む特定のテーマを共有したいと思います-私たちの全体のアプリ全体.我々はそれを達成することができますThemeData クラスは、私たちの好みを満たすために多くの機能を提供します.
以下のコードブロックを考えてください.

MaterialApp(
 title: 'Guide to Theming in Flutter',
 theme: ThemeData(
 brightness: Brightness.dark,
 primaryColor: Colors.lightBlue[800],
 accentColor: Colors.cyan[600],
 fontFamily: 'Georgia',
 textTheme: TextTheme(
  headline1: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
  headline6: TextStyle(fontSize: 30.0, fontStyle: FontStyle.italic),
  bodyText2: TextStyle(fontSize: 18.0, fontFamily: 'Hind'),
 ),
 ),
 home: MyHomePage(),
);

The ThemeData クラスは、アプリケーションのテーマを調整するために変更できるプロパティを提供します.The brightness テキストの色が黒になると、プロパティのテーマは、全体的な明るさとアプリケーションのテキストの色に影響を与えるBrightness.light と白でBrightness.dark .
The primaryColor プロパティはツールバー、タブバー、およびアプリケーションバーを含むアプリケーションの重要な部分の背景色に影響します.
The accentColor プロパティはウィジェットのフォアグラウンド色に影響し、二次色を参照します.フォントファミリだけでなく、textTheme , 上のコードブロックで見られるように、すべて変更されました.
フラッタは、それぞれの値を割り当てるheadline and bodyText デフォルトのカテゴリーは、それぞれのデザインの味に合わせて調整することができます.
具体的には、アプリケーションの任意の部分で宣言されたテーマのいずれかを使用するには、我々は単に以下のように、我々は欲しいものを呼び出す必要があります.

Container(
 color: Theme.of(context).accentColor,
 child: Text(
 'Theming in Flutter',
 style: Theme.of(context).textTheme.headline6,
 ),
),

上で、我々は宣言されたテキストをスタイルheadline6 値は、フォントサイズを意味する36とフォントスタイルはイタリックになります.スタイリングのためのこのメソッドはかなり便利であり、私たちがそれぞれのスタイルをそれぞれにしていた場合、アプリケーション間で繰り返されるコードの行の数を削減します.

光と暗いテーマモード

我々が議論するテーマの最後のタイプは、フラッターアプリのための光と暗いテーマモードの実装です.ダークテーマモードは、一般的にバッテリ寿命のためのエネルギーを節約し、低光物理的な設定で目にストレスを減らすためにアプリケーションで使用されます.
このチュートリアルでは、adaptive_theme package これを容易にする.このパッケージは、スムーズな設定と異なるテーマモードの移行を確保するために、多くの優れたボックス機能を提供します.また、最も現在のテーマは、アプリケーションの再起動たびに使用されます.
AdaptiveRoundテーマに加えて、我々はまた、使用しますRiverpod package .
以下のコードを依存関係ブロックの下に追加しますpubspec.yaml ファイル.

dependencies:
 adaptive_theme: ^2.2.0
 flutter_riverpod: ^0.14.0+3

を実行するflutter pub get 端末のコマンド.このコマンドは、ダウンロードしてコードベースで使用する準備ができている両方のパッケージを取得します.

flutter pub get

ヘッドオーバーmain.dart ファイルとインポートAdaptiveRoundテーマとRiverpod packages .

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

変数名を作成するsavedThemeMode アプリケーションの再起動時にユーザーの最も最近使用したモードにアクセスします.メインブロックを非同期にし、getThemeMode AdaptiveRoundテーマパッケージが提供する機能.
次のことは、アプリ全体をラップすることですProviderScope クラスは、アプリケーションで使用されるプロバイダーにアクセスします.

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 final savedThemeMode = await AdaptiveTheme.getThemeMode();
 runApp(ProviderScope(child: MyApp(savedThemeMode: savedThemeMode)));
}

受信する変数を作成するsavedThemeMode 上のメインブロックから.全体を覆うMaterialApp ApplictiveRankテーマクラスでは、アプリケーションのための光と暗いテーマモードをカスタマイズできるように、そのプロパティへのアクセスを与える.

class MyApp extends StatelessWidget {
 final AdaptiveThemeMode? savedThemeMode;
 // ignore: use_key_in_widget_constructors
 const MyApp({this.savedThemeMode});
 @override
 Widget build(BuildContext context) {
 return AdaptiveTheme(
  light: ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.green,
  scaffoldBackgroundColor: Colors.white,
  ),
  dark: ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.red,
  scaffoldBackgroundColor: Colors.black,
  iconTheme: const IconThemeData(
   color: Colors.black,
  ),
  ),

パスThemeData にlight プロパティadaptive_theme クラスを作成します.次に、brightness , primaryColor , and scaffoldBackgroundColor . 同じことが起こるdark プロパティ.内部のプロパティを変更しますThemeData クラスとAdaptiveRankテーマによって提供されるプロパティに渡します.
次は、我々がsavedThemeMode , もしperadventure がNULL (例えば、アプリケーションが新しくインストールされている場合)は、デフォルトではライトテーマモードになります.そして最後にMaterialApp クラスへのbuilder 関数を宣言し、そのプロパティに宣言したテーマを渡します.

 initial: savedThemeMode ?? AdaptiveThemeMode.light,
  builder: (theme, dark) {
  return MaterialApp(
  title: 'Article Light/Dark Theme',
  theme: theme,
  darkTheme: dark,
  home: const HomePage(),
  );
  },
 );
 }
}

光と暗いテーマモードを切り替えるにはRawMaterialButton そして、toggleMode AdaptiveRoundテーマの機能onPressed プロパティ.このボタンは、ユーザーが2つのモードをクリックしたり、ボタンをタップして切り替えることができます.

class HomePage extends StatelessWidget {
 const HomePage({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
  title: const Text('Light/Dark theme in Flutter'),
  ),
  body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
   Center(
   child: RawMaterialButton(
    child: const Text(
    'Switch Modes',
    style: TextStyle(
     fontSize: 20,
     fontWeight: FontWeight.bold,
    ),
    ),
    onPressed: () {
    AdaptiveTheme.of(context).toggleThemeMode();
    },
    fillColor: Colors.green,
    padding: const EdgeInsets.all(16),
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
    ),
   ),
   ),
  ],
  ),
 );
 }
}

最後に、以下の画像は、トグルしたときに表示される光と暗いテーマモードを示しています.

結論

あなたの希望のテーマを作成する様々なプロパティをカスタマイズすることは非常にエキサイティングなことができる、特にそれはアプリのデザインの好みに関連するように.あなたが今まで学んだことで、あなたは今スタイルの個々のクラスは、コンテナウィジェット、さらにはあなたのアプリのカスタム光と暗いテーマモードを与えることができます.

あなたのウェブアプリにフル可視性

LogRocket フロントエンドアプリケーションを監視するソリューションを再生する場合は、自分のブラウザで起こった問題を再生することができます.代わりに、エラーが発生したり、スクリーンショットやログのダンプのユーザーを求めるのを推測するのではなく、LogRocketすぐに何が間違って理解するためにセッションをリプレイすることができます.これは、フレームワークに関係なく、任意のアプリケーションを完全に動作し、RedUx、VUEX、およびNGRX/ストアからの追加のコンテキストを記録するプラグインがあります.
ログのReduxのアクションと状態に加えて、ログログオンレコードコンソールログ、JavaScriptのエラー、StackTrart、ヘッダー/本文、ブラウザのメタデータ、およびカスタムログを使用してネットワークのリクエスト/応答.また、DOMは、最も複雑な単一ページのアプリのピクセル完璧なビデオを再現、ページ上のHTMLとCSSを記録するために楽器を計る.
Try it for free .