close

Formatting UI with ThemeData and Custom Styles in Flutter

In Flutter, you can format the look and feel of your application using ThemeData and customize the styles. ThemeData is a class that contains properties to define the dominant color styles, fonts, padding, etc. for the entire application. Custom Style allows you to customize styles for each specific Widget. Here are detailed instructions on how to use ThemeData and Custom Styles in Flutter:

ThemeData

In Flutter, ThemeData is a class that contains attributes to define the primary color, font family, padding, and many other styling options for the entire application. By using ThemeData, you can quickly change the overall appearance of your app without having to modify each individual Widget.

Common attributes of ThemeData:

  • primaryColor: The primary color for main elements of the app, such as the app bar, buttons, etc.
  • accentColor: The accent color for secondary elements or highlights in the UI, such as FloatingActionButton.
  • backgroundColor: The background color for the entire app.
  • textTheme: Defines the primary text styles for different text elements in the app, such as headings, body text, etc.
  • textTheme.headline1: Text style for heading level 1.
  • textTheme.headline2: Text style for heading level 2.
  • textTheme.bodyText1: Text style for the main body 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(),
)

 

Custom Style

Custom Styles allow you to customize the style for each specific Widget. By using the style attribute of Widgets like Text, Container, RaisedButton, etc., you can change the font, color, text size, padding, and various other attributes.

Common attributes of TextStyle (used for Text Widget):

  • fontSize: The font size.
  • fontWeight: The font weight.
  • color: The text color.
  • fontStyle: The font style, such as bold, italic.
  • letterSpacing: The spacing between characters.
  • wordSpacing: The spacing between words.
  • decoration: The text decoration, such as underline, strike-through.

Example using 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)),
)

 

Using Themes and Styles with MediaQuery

You can combine Themes and Styles with MediaQuery to adjust the UI based on the screen size or device resolution.

Example:

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

 

Conclusion:

Flutter provides powerful tools to format the UI of your application. By using ThemeData and customizing Styles, you can easily adjust UI elements such as colors, fonts, text sizes, etc., to create a beautiful and engaging interface for your app.