close

Formátování uživatelského rozhraní s ThemeData a Custom Styles in Flutter

V Flutter, můžete formátovat vzhled a chování vaší aplikace pomocí ThemeData a přizpůsobit styles. ThemeData je třída, která obsahuje vlastnosti pro definování dominantní barvy styles, fontů padding atd. pro celou aplikaci. Custom Style umožňuje přizpůsobit styles pro každý konkrétní Widget. Zde jsou podrobné pokyny k použití ThemeData a přizpůsobení Styles v Flutter:

ThemeData

V Flutter, ThemeData je třída, která obsahuje atributy pro definování primární barvy, rodiny písem, padding a mnoho dalších možností stylů pro celou aplikaci. Pomocí ThemeData můžete rychle změnit celkový vzhled vaší aplikace, aniž byste museli upravovat každého jednotlivce Widget.

Společné atributy ThemeData:

  • primaryColor: Primární barva pro hlavní prvky aplikace, jako je panel aplikace, tlačítka atd.
  • accentColor: Barva zvýraznění pro sekundární prvky nebo zvýraznění v uživatelském rozhraní, jako je FloatingActionButton.
  • backgroundColor: Barva pozadí pro celou aplikaci.
  • textTheme: Definuje primární text styles pro různé textové prvky v aplikaci, jako jsou nadpisy, hlavní text atd.
  • textTheme.headline1: Styl textu pro úroveň nadpisu 1.
  • textTheme.headline2: Styl textu pro úroveň nadpisu 2.
  • textTheme.bodyText1: Styl textu pro hlavní text.
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(),  
)

 

Vlastní styl

Vlastní Styles vám umožní přizpůsobit styl pro každý konkrétní Widget. Pomocí style atributu widgetů jako Text, Container, RaisedButton atd. můžete změnit písmo, barvu, velikost textu, padding a různé další atributy.

Společné atributy TextStyle(používá se pro Text Widget):

  • fontSize: Velikost písma.
  • fontWeight: Tloušťka písma.
  • color: Barva textu.
  • fontStyle: Styl písma, jako je tučné písmo, kurzíva.
  • letterSpacing: Mezery mezi znaky.
  • wordSpacing: Mezery mezi slovy.
  • decoration: Dekorace textu, jako je podtržení, přeškrtnutí.

Příklad použití 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)),  
)

 

Pomocí Themes a Styles s MediaQuery

Můžete kombinovat Themes a Styles upravit MediaQuery uživatelské rozhraní na základě velikosti obrazovky nebo rozlišení zařízení.

Příklad:

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

 

Závěr:

Flutter poskytuje výkonné nástroje pro formátování uživatelského rozhraní vaší aplikace. Pomocí ThemeData a přizpůsobení Styles můžete snadno upravit prvky uživatelského rozhraní, jako jsou barvy, písma, velikosti textu atd., a vytvořit tak pro vaši aplikaci krásné a poutavé rozhraní.