Preface: this period of time are very busy, did not remember to update, I have to learn and update, but also go to work, every day is also very tired, I hope everyone to see this article, feel that it is ok to leave your praise ~

  • Night mode setting
  • font

Night mode setting

The Night mode Settings are done with the Brightness attribute in the theme

  • Brightness. Dark night mode
  • Brightness. Light Daytime mode
  bool _isLight = true;// Check whether night mode is true daytime false night mode
 theme: new ThemeData(
          fontFamily: "MaoTi".// Set the global font
          brightness:
              _isLight == true ? Brightness.light : Brightness.dark // Determine the night/day mode
          ),
Copy the code

Then set judgment Ink() in the button, the InkResponse() component is covered in detail in the next chapter

 Padding(
                padding: EdgeInsets.only(top: 20),
                child: Ink(
                  decoration: BoxDecoration(
                    borderRadius: new BorderRadius.circular(25),
                    border: Border.all(color: Colors.black, width: 2),
                  ),
                  child: InkResponse(
                    borderRadius: BorderRadius.circular(25),
                    splashColor: Colors.tealAccent,
                    radius: 300./ / -- -)
                    containedInkWell: true./ / -- -)
                    highlightShape: BoxShape.rectangle,
                    / / -- -)
                    child: Container(
                      width: 200,
                      height: 50,
                      alignment: Alignment.center,
                      child: Text("Switch themes"),
                    ),
                    onTap: () {
                      setState(() {
                      // Here is the judgment assignment
                        _isLight == true ? _isLight = false : _isLight = true; }); },),),)Copy the code

To see the effect, just in time to see the effect of Ink(),InkResponse() hahaha

font

Free Font Download

Right click to download;

Create a fonts folder for your font library

Declare the font at the bottom of pubspec.yaml, pay attention to the format!

Fonts: -family: MaoTi # font alias fonts: -asset: fonts/ MaoTi.700# weights700Fonts: - asset: fonts/iconfont. TTF # font file directory weight:700# weights700Stands for bold, equivalent to boldCopy the code

Then click Pub get to compile the font

Global use:

Set the global font using the fontFamily property in the theme

  theme: new ThemeData(
          fontFamily: "MaoTi".// Set the global font

          brightness:
              _isLight == true ? Brightness.light : Brightness.dark // Determine the night/day mode
          ),
Copy the code



The font hereMaoTiIt’s a quotepubspec.yamlThe alias declared in

Individual use:

Text(
         "I'm testing Text.",
          style: TextStyle(fontFamily: "MaoTi"),
        ),
Text(
         "Switch themes".// Set the font with the fontFamily property in TextStyle
          style: TextStyle(fontFamily: "iconfont"),),Copy the code

Take a look at the results:

This is also set to the global trichome

You can see it in the renderings

  • I’m testing Text which has turned into a hairy body
  • Switching themes is the default font

The complete code

Free Font Download

Chapter 1 :Flutter Image Cache (2.1)

The next chapter :Flutter Ink,InkWell,InkResponse Water ripple implementation 2.3

Your like is the biggest support for me, leave your like ~