close

Formatowanie interfejsu użytkownika za pomocą ThemeData i Custom Styles in Flutter

W programie Flutter, możesz sformatować wygląd i działanie swojej aplikacji za pomocą ThemeData i dostosować plik styles. ThemeData to klasa zawierająca właściwości definiujące dominujący kolor styles, czcionki padding itp. dla całej aplikacji. Styl niestandardowy umożliwia dostosowanie styles do każdego konkretnego pliku Widget. Oto szczegółowe instrukcje dotyczące używania ThemeData i niestandardowego Styles w Flutter:

ThemeData

In Flutter, ThemeData jest klasą, która zawiera atrybuty definiujące kolor podstawowy, rodzinę czcionek padding i wiele innych opcji stylizacji dla całej aplikacji. Używając programu ThemeData, możesz szybko zmienić ogólny wygląd swojej aplikacji bez konieczności modyfikowania poszczególnych elementów Widget.

Wspólne atrybuty ThemeData:

  • primaryColor: podstawowy kolor głównych elementów aplikacji, takich jak pasek aplikacji, przyciski itp.
  • accentColor: Kolor akcentu dla elementów drugorzędnych lub wyróżnień w interfejsie użytkownika, takich jak FloatingActionButton.
  • backgroundColor: kolor tła całej aplikacji.
  • textTheme: definiuje główny tekst styles dla różnych elementów tekstowych w aplikacji, takich jak nagłówki, treść itp.
  • textTheme.headline1: styl tekstu dla poziomu nagłówka 1.
  • textTheme.headline2: styl tekstu dla poziomu nagłówka 2.
  • textTheme.bodyText1: styl tekstu głównego tekstu.
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(),  
)

 

Styl niestandardowy

Niestandardowe Styles pozwalają dostosować styl dla każdego konkretnego pliku Widget. Korzystając z style atrybutu widżetów, takiego jak Tekst, Kontener, RaisedButton itp., możesz zmienić czcionkę, kolor, rozmiar tekstu padding i różne inne atrybuty.

Typowe atrybuty TextStyle(używane dla Text Widget):

  • fontSize: Rozmiar czcionki.
  • fontWeight: Grubość czcionki.
  • color: Kolor tekstu.
  • fontStyle: styl czcionki, taki jak pogrubienie, kursywa.
  • letterSpacing: Odstęp między znakami.
  • wordSpacing: Odstępy między słowami.
  • decoration: Dekoracja tekstu, taka jak podkreślenie, przekreślenie.

Przykład użycia niestandardowego 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 Za pomocą Styles iz MediaQuery

Możesz łączyć Themes i Styles z MediaQuery, aby dostosować interfejs użytkownika na podstawie rozmiaru ekranu lub rozdzielczości urządzenia.

Przykład:

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

 

Wniosek:

Flutter zapewnia potężne narzędzia do formatowania interfejsu użytkownika aplikacji. Używając ThemeData i dostosowując Styles, możesz łatwo dostosować elementy interfejsu użytkownika, takie jak kolory, czcionki, rozmiary tekstu itp., aby stworzyć piękny i atrakcyjny interfejs dla swojej aplikacji.