Recently I am learning Flutter. I want to make an app by drawing some time, so I can play Android. I can use the existing APi to operate Flutter. Step 1: Set up the main page as follows:

It mainly includes several parts:

  • AppBar, which contains Drawaer, can be opened
  • BottomNavigationBar: BottomNavigationBar, body content changes when switching
  • The third Icon uses the three-party Icon, and the following focuses on how to use the third-party Icon; If you use Image as an Icon, the color change for clicking will not exist, and if you use Icon, the color change will follow.

Page structure

The home page is a StatefulWidget that toggles index with the TAB below, and the body loads different content based on index.

Using tripartite ICONS

  1. Download the iconfont. TTF file from www.iconfont.cn/ and refer to the first article below.
  2. Create a fonts directory in your project and place iconfont. TTF in this directory.
  3. Configure font in pubspec.yaml as follows:
 fonts:
     - family: AliIcon
       fonts:
         - asset: fonts/iconfont.ttf
Copy the code
  1. Create an ali_icon file in the lib directory with the following contents:
import 'package:flutter/widgets.dart';

class AliIcons {
  static const IconData wechat = const _AliIconData(0xe679);
}

class _AliIconData extends IconData {
  const _AliIconData(int codePoint)
      : super(codePoint, fontFamily: 'AliIcon');
}
Copy the code

This allows you to use Icons in the same way you use Icons (icons.like) and so on. 5. Use

    BottomNavigationBarItem(icon: Icon(AliIcons.wechat), title: Text('Public Account')),
Copy the code

Please refer to the first article below for information about the official wechat account 0xe679.

For code, see the branch code: github.com/wangli135/w…

reference

  • Use the iconfont. TTF icon text library instead of icon images
  • Try Steps 1 — 3 for Flutter using a custom Icon

Pay attention to my technical public number, there will be technical articles pushed irregularly, dare not say quality, but at least it is my own learning experience. Scan the qr code below on wechat to follow: