close

Käyttöliittymän muotoilu ThemeData ja mukautettu Styles sisään Flutter

-sovelluksessa Flutter voit muotoilla sovelluksesi ulkoasun ThemeData ja mukauttaa styles. ThemeData on luokka, joka sisältää ominaisuuksia, joilla määritetään hallitseva väri styles, fontit padding jne. koko sovellukselle. Mukautetun tyylin avulla voit mukauttaa styles kullekin tietylle Widget. Tässä on yksityiskohtaiset ohjeet kuinka käyttää ThemeData ja Styles mukauttaa Flutter:

ThemeData

In Flutter, ThemeData on luokka, joka sisältää attribuutteja päävärin, kirjasinperheen padding ja monien muiden koko sovelluksen tyyliasetusten määrittämiseksi. Käyttämällä sovellusta ThemeData voit nopeasti muuttaa sovelluksesi yleisilmettä ilman, että sinun tarvitsee muokata jokaista yksittäistä Widget.

Yleiset ominaisuudet ThemeData:

  • primaryColor: Sovelluksen pääelementtien, kuten sovelluspalkin, painikkeiden jne., pääväri.
  • accentColor: Käyttöliittymän toissijaisten elementtien tai kohokohtien korostusväri, kuten FloatingActionButton.
  • backgroundColor: Koko sovelluksen taustaväri.
  • textTheme: Määrittää ensisijaisen tekstin styles sovelluksen eri tekstielementeille, kuten otsikoille, leipätekstille jne.
  • textTheme.headline1: Otsikkotason 1 tekstityyli.
  • textTheme.headline2: Tekstityyli otsikkotasolle 2.
  • textTheme.bodyText1: Päätekstin tekstityyli.
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(),  
)

 

Mukautettu tyyli

Mukautetun Styles avulla voit mukauttaa tyyliä kullekin tietylle Widget. Käyttämällä style widgetien attribuuttia, kuten teksti, säilö, korotettu painike jne., voit muuttaa fonttia, väriä, tekstin kokoa padding ja monia muita määritteitä.

TextStylen yleiset attribuutit(käytetään teksti-widgetissä):

  • fontSize: Kirjasinkoko.
  • fontWeight: Kirjasimen paino.
  • color: Tekstin väri.
  • fontStyle: Kirjasintyyli, kuten lihavoitu, kursivoitu.
  • letterSpacing: merkkien väli.
  • wordSpacing: Sanojen väli.
  • decoration: Tekstin koristelu, kuten alleviivaus, yliviivaus.

Esimerkki mukautetusta käytöstä 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)),  
)

 

Käyttämällä Themes ja Styles kanssa MediaQuery

Voit yhdistää Themes ja Styles -painikkeella MediaQuery käyttöliittymää näytön koon tai laitteen resoluution mukaan.

Esimerkki:

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

 

Johtopäätös:

Flutter tarjoaa tehokkaita työkaluja sovelluksesi käyttöliittymän muotoiluun. Käyttämällä ThemeData ja mukauttamalla Styles voit helposti säätää käyttöliittymän elementtejä, kuten värejä, fontteja, tekstikokoja jne., luodaksesi kauniin ja mukaansatempaavan käyttöliittymän sovelluksellesi.