Fluent settings apply theme colors and fonts

Time:2022-5-25

In the process of app development, we certainly hope to bring a consistent experience to users. The most basic thing is to keep the tone and font consistent. In fluent, you can set the global theme tone and font, so as to reference the main color and font on other pages to achieve the consistency of page display level.

The theme color and font of fluent can be set in materialapp, that is, in main The materialapp component returned from the dart entry uniformly sets the global main color and font. The code is shown below:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      Title: 'app framework',
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.blue[600],
        textTheme: TextTheme(
          headline1: TextStyle(
              fontSize: 36.0, fontWeight: FontWeight.bold, color: Colors.white),
          headline2: TextStyle(
              fontSize: 32.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline3: TextStyle(
              fontSize: 28.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline4: TextStyle(
              fontSize: 24.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline6: TextStyle(
              fontSize: 14.0, fontWeight: FontWeight.w200, color: Colors.white),
          bodyText1: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.w200,
          ),
        ),
        fontFamily: 'Georgia',
      ),
      home: AppHomePage(),
    );
  }
}

Build themedata to configure the global theme through the theme attribute of materiaapp. The common properties of themedata are as follows:

  • Brightness: enumeration of brightness, including dark and light modes, where dark corresponds to dark mode (i.e. night mode) and light corresponds to light mode.
  • Primarycolor: primary color. After setting, the navigation bar will become the primary color. Note that the font color of the navigation bar will automatically calculate whether the displayed color is light or dark according to the main tone and brightness.
  • Accentcolor: auxiliary color, set as required.
  • Texttheme: text body. There are few settings in the earlier version of fluent. The new version may be to support the web side. The attribute settings of fonts are basically consistent with those of HTML, including headline1 to headline6 and bodytext1. It seems that they correspond to the fonts of h1-h6 and body in HTML. Fonts at all levels can set corresponding font parameters by constructing TextStyle.
  • Fontfamily: font family.

In the application, you can use theme Of (context) gets the current subject, and then gets the corresponding attribute to inherit the tone or font of the theme. For example, the style of text in the following code inherits the font characteristics of bodytext1 of the main body.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'island',
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),
    );
  }

The selecteditemcolor in the bottomnavigationbar inherits the main tone.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        Title: text ('code farmers on the island ', style: theme. Of (context) textTheme. headline4),
      ),
      body: IndexedStack(
        index: _index,
        children: _homeWidgets,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _index,
        onTap: _onBottomNagigationBarTapped,
        selectedItemColor: Theme.of(context).primaryColor,
        items: [
          _getBottomNavItem(
              'dynamic ',' images / dynamic png', 'images/dynamic-hover. png'),
          _getBottomNavItem(
              'messages', 'images / message png', 'images/message-hover. png'),
          _getBottomNavItem(
              'Browse by category', 'images / category png', 'images/category-hover. png'),
          _getBottomNavItem(
              'personal center', 'images / mine png', 'images/mine-hover. png'),
        ],
      ),
    );
  }

In this way, you can The hue and font are uniformly configured in the materialapp in dart to achieve the goal of global consistency. If you want to adjust the tone and font, you only need to modify it in one place. The final result is shown in the figure below (some pictures have changed the theme color to green).

zhusediao.jpg

Students with obsessive-compulsive disorder may find that the color of the status bar is black. How to modify this? Simply set the brightness property of AppBar:

return Scaffold(
      appBar: AppBar(
        Title: text ('code farmers on the island ', style: theme. Of (context) textTheme. headline4),
        brightness: Brightness.dark,
      ),
  //...

The above is the setting of the theme color and font of the fluent app. In fact, another operation method can also use the way of global constant to agree on the main color, auxiliary color and font used in the whole project. The next article introduces how to build a list. Welcome to praise and encourage!

Recommended Today

How to configure Jenkins through yaml file

Install Jenkins docker run -d –name jenkins-master -p 8080:8080 -p 50000:50000 -v /var/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime –restart=always jenkinsci/blueocean After successful startup, log in to Jenkins and the initial password path is:/var/jenkins_home/secrets/initialAdminPassword。And install Jenkins configuration as code (a.k.a. jcasc) plugin. The jcasc plug-in supports the use of yaml filesjenkins.yamlTo configure the Jenkins instance, it does not support […]