This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Here we imitate wechat to simply realize some functions, learn about the construction of the project and the configuration of engineering resources.

Tabar and home page at the bottom are set up

As shown in the figure, we can first select tabbar at the bottom and switch the interface.

First of all, we create folders and root page folders according to function modules. We can create folders according to our own habits. Here we divide folders according to function modules.

Main file code implementation

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget {@override Widget Build (BuildContext Context) {return MaterialApp(// Hide debug Identify debugShowCheckedModeBanner: false, / / theme set theme: ThemeData (primarySwatch: Color: highlightColor: color.fromrgbo (1, 0, 0, 0.0), splashColor: Color.fromrgbo (1, 0, 0, 0.0)), home: RootPage(),); }}Copy the code

Root page code implementation

class RootPage extends StatefulWidget { const RootPage({Key? key}) : super(key: key); @override _RootPageState createState() => _RootPageState(); } class _RootPageState extends State<RootPage> { int _currentIndex = 0; List <Widget>_pages = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()]; @override Widget build(BuildContext context) { return Container( child: Scaffold( body: _pages[_currentIndex], bottomNavigationBar: bottomNavigationBar ( (index){ setState(() { _currentIndex = index; }); }, / / item selected font size selectedFontSize: 12.0, / / set the style of the item type: BottomNavigationBarType. Fixed, / / item selected color fixedColor: Color. green, // Default index currentIndex: _currentIndex, items: [BottomNavigationBarItem(icon: BottomNavigationBarItem) Icon(Icons. Chat), label: 'wechat '), BottomNavigationBarItem(Icon: Icon(Icons. Bookmark), label: 'Address book '), BottomNavigationBarItem(icon: icon (Icons. History), label:' found '), BottomNavigationBarItem(icon: Icon (the Icons. Person_outline), label: 'I'),],),),); }}Copy the code

Function page code implementation

class ChatPage extends StatefulWidget { const ChatPage({Key? key}) : super(key: key); @override _ChatPageState createState() => _ChatPageState(); } class _ChatPageState extends State<ChatPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('微信页 '),), body: Center(child: Text('微信页 '),); }}Copy the code

Here we take the chat page as an example, simply create an empty page, other pages are similar, here we have achieved the basic page building.

Engineering resource allocation

Here we will focus on android resource file configuration.

Icon Icon Configuration

First we can see this XML file, and then we can add the name of the app, and then we can configure the icon of the app, and one thing to note is that the image name can’t be camel name.

It should be noted that there are no concepts such as @1x and @2x in Android, but these files are equivalent to @4x, @3x, @2x, @1.5x, @1x and @0.7x in iOS. We can put the corresponding image resources into these files.

Start image Configuration

As shown in the picture, we just add the name of the startup image here, and then put the startup image in the corresponding folder below.

Resource allocation of Flutter Project image

When we need to configure the Flutter project image, we first drag the image file to the Flutter project and then configure the pubspec.yaml file. As shown in the picture, we just add the “images” folder name. One thing to note here is that assets must be aligned with the above code, otherwise an error will be reported. Not only image resources can be configured here, but also some of the tripartite components that we need to use.

Local Image usage

// Image(Image: AssetImage(' Image file name/Image name. Suffix ') Image(Image: AssetImage('images/tabbar_chat.png')Copy the code