[shutter] shutter custom fonts (download TTF fonts | pubspec.yaml configure font resources | synchronize resources | globally apply fonts | locally apply fonts)

One 、Flutter Custom Fonts

---

1、ttf The font file

Font resource file : ttf Format font resources ;

Flutter Apply font resource file : stay Flutter Create... In the application root directory fonts Catalog , Will download ttf The font is placed in the resource file fonts Under the table of contents ;

2、ttf Font resource configuration

Configure font resources : Custom font resources need to be in pubspec.yaml Configuration in profile , The font resource configuration format is as follows :

fonts:  - family: Schyler    fonts:      - asset: fonts/Schyler-Regular.ttf      - asset: fonts/Schyler-Italic.ttf        style: italic  - family: Trajan Pro    fonts:      - asset: fonts/TrajanPro.ttf      - asset: fonts/TrajanPro_Bold.ttf        weight: 700

Use here RubikMonoOne-Regular.ttf The font file , The configuration is as follows :

flutter:  #  Configure image resources   assets:   - images/hunter.png  #  Configure font resources   fonts:   - family: RubikMonoOne     fonts:      - asset: fonts/RubikMonoOne-Regular.ttf

The font file corresponding to this configuration RubikMonoOne-Regular.ttf Put it in the root directory fonts Under the table of contents ;

3、 Get the font

stay pubspec.yaml After configuring font resources in the configuration file , Click on " Pub get " Button , Synchronize resources ;

After displaying the following , It indicates that the resource synchronization is successful ;

D:\001_Programs\004_Flutter\flutter\bin\flutter.bat --no-color pub getRunning "flutter pub get" in flutter_cmd...                         0.7sProcess finished with exit code 0

4、 Use fonts globally

Apply fonts globally : stay MaterialApp The root node of the theme Field value ThemeData In the component fontFamily Field setting font , It's set here pubspec.yaml Configuration file family The value under the tag “RubikMonoOne” ;

Font configuration :

  fonts:   - family: RubikMonoOne     fonts:      - asset: fonts/RubikMonoOne-Regular.ttf

Code example :

MaterialApp(  //  Set title   title: ,  //  Set the theme   theme: ThemeData(    //  Configure Fonts     fontFamily: "RubikMonoOne"  ),  //  Set the main components of the interface   home: ,)

5、 Use fonts locally

Apply fonts locally : stay Text Of style Field set text style , TextStyle Of type components fontFamily You can set the font ;

Code example :

Text(	"StatefulWidget  Page lifecycle ", 	style: TextStyle(		fontFamily: "RubikMonoOne"	),),

Two 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';import 'package:flutter_cmd/GesturePage.dart';import 'package:flutter_cmd/ResourcePage.dart';import 'package:flutter_cmd/StatelessWidgetPage.dart';import 'package:flutter_cmd/WidgetLifeCyclePage.dart';import 'AppLiftCyclePage.dart';import 'LauncherPage.dart';import 'LayoutPage.dart';import 'StatefulWidgetPage.dart';import 'ThemePage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { 
      @override  Widget build(BuildContext context) { 
        return MaterialApp(      //  Set title       title: 'Flutter Demo',      //  Set the theme       theme: ThemeData(        //  Configure Fonts         fontFamily: "RubikMonoOne",        //  Configure theme colors         primarySwatch: Colors.blue,      ),      //  Set the main components of the interface       home: Scaffold(        //  Set the title bar         appBar: AppBar(          title: Text(" Routing and navigation "),        ),        //  Set the main components of the interface         body: RouteNavigator(),      ),      //  Configure the routing       routes: <String, WidgetBuilder>{ 
            "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),        "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),        "LayoutPage" : (BuildContext context) => LayoutPage()      },    );  }}class RouteNavigator extends StatefulWidget { 
      @override  _RouteNavigatorState createState() => _RouteNavigatorState();}class _RouteNavigatorState extends State<RouteNavigator> { 
      @override  Widget build(BuildContext context) { 
        return Container(      //  In the middle       alignment: Alignment.center,      child: Column(        children: <Widget>[          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "LayoutPage");            },            child: Text(" Jump to the page by route name 1"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "StatefulWidgetPage");            },            child: Text(" Jump to the page by route name 2"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "StatelessWidgetPage");            },            child: Text(" Jump to the page by route name 3"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));            },            child: Text(" Navigate to the page 1"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));            },            child: Text(" Navigate to the page 2"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));            },            child: Text(" Navigate to the page 3"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => GesturePage()));            },            child: Text(" Gesture detection interface "),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => ResourcePage()));            },            child: Text(" Resource usage interface "),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => LauncherPage()));            },            child: Text(" Third party application jump "),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => WidgetLiftCyclePage()));            },            child: Text("StatefulWidget  Page lifecycle ", style: TextStyle(fontFamily: "RubikMonoOne"),),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => AppLifeCyclePage()));            },            child: Text(" Application life cycle "),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => ThemePage()));            },            child: Text(" Topic switching "),          ),        ],      ),    );  }}

Operation effect display :

3、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15602328 ( The source code snapshot of this blog , You can find the source code of this blog )