close

ThemeData およびカスタム Styles で UI をフォーマットする Flutter

では Flutter、 を使用してアプリケーションの外観をフォーマットし ThemeData 、カスタマイズできます styles。 は、アプリケーション全体の主要な色 、フォントなど ThemeData を定義するプロパティを含むクラスです。 カスタム スタイルを使用すると、特定の .html ごとに カスタマイズできます 。 の使用方法 とカスタム 方法の詳細な手順は次のとおりです 。 styles padding styles Widget ThemeData Styles Flutter

ThemeData

の は Flutter、 アプリケーション全体の ThemeData 基本色、フォント ファミリ、およびその他の多くのスタイル オプションを定義するための属性を含むクラスです。 padding を使用すると ThemeData 、個々の を変更することなく、アプリ全体の外観をすばやく変更できます Widget。

の共通属性 ThemeData:

  • primaryColor: アプリバー、ボタンなど、アプリの主要要素の基本色。
  • accentColor: FloatingActionButton など、UI の二次要素またはハイライトのアクセント カラー。
  • backgroundColor: アプリ全体の背景色。
  • textTheme styles:見出し、本文テキストなど、アプリ内のさまざまなテキスト要素の 主テキストを定義します。
  • textTheme.headline1: 見出しレベル 1 のテキスト スタイル。
  • textTheme.headline2: 見出しレベル 2 のテキスト スタイル。
  • textTheme.bodyText1 ：本文の文字スタイル。 
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

カスタムスタイル

[カスタム] を Styles 使用すると、特定のそれぞれのスタイルをカスタマイズできます Widget。 Text、Container、RaizedButton などのウィジェットの属性を使用して、フォント、色、文字サイズ 、その他のさまざまな属性 style を変更できます。 padding

TextStyle の共通属性(テキスト ウィジェットに使用):

  • fontSize ：フォントサイズ。
  • fontWeight: フォントの太さ。
  • color: 文字の色。
  • fontStyle: 太字、斜体などのフォント スタイル。
  • letterSpacing: 文字間の間隔。
  • wordSpacing: 単語間の間隔。
  • decoration ：下線、取り消し線などの文字装飾です。

Custom を使用した例 Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

使用 Themes および Styles 使用 MediaQuery

Themes と を Styles 組み合わせて MediaQuery 、画面サイズまたはデバイスの解像度に基づいて UI を調整 できます。

例： 

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

結論：

Flutter アプリケーションの UI をフォーマットするための強力なツールを提供します。 を使用し ThemeData てカスタマイズする Styles と、色、フォント、テキスト サイズなどの UI 要素を簡単に調整して、アプリの美しく魅力的なインターフェイスを作成できます。