This folder allows you to quickly find what you need to learn about Flutter!!

The previous articles were all about environment configuration and basic grammar learning. In my opinion, learning a new language (fast and efficient learning) must be through practice, the best is with a project, if you can imitate the next project then basically almost! Here I will use wechat project as the case of imitation writing, I hope you like it!

Github project address welcome everyone to like xinxin thank you

I: wechat project construction

(1) the main APP

Here is the main interface abstracted out to facilitate access and modification

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeChat',
      theme: ThemeData(
        highlightColor: Color.fromARGB(1.0.0.0),
        splashColor: Color.fromARGB(1.0.0.0), primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: KCRootPage(), ); }}Copy the code
  • highlightColor : High light color Settings
  • splashColor : Hold down color Settings
  • KCRootPage: Root controller

② Root controller

The root controller configuration is consistent with basic iOS development! Where class KCRootPage extends StatefulWidget makes it possible to dynamically adjust what is known as state management

class KCRootPage extends StatefulWidget {
  @override
  _KCRootPageState createState() => _KCRootPageState();
}

class _KCRootPageState extends State<KCRootPage> {
  int _currentIndex = 0;
  List<Widget> _pages = [KCChatPage(),KCFriendsPage(),KCDiscoverPage(), KCMinePage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState(() {
            _currentIndex = index;
          });
        },
        selectedFontSize: 12.0,
        currentIndex: _currentIndex,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat),label: 'WeChat'),
          BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: 'Address book'),
          BottomNavigationBarItem(icon: Icon(Icons.history),label: 'found'),
          BottomNavigationBarItem(icon: Icon(Icons.person),label: '我'),,),); }}Copy the code
  • throughBottomNavigationBarItemSet the bottom button:WeChat,The address book,found,I
  • List<Widget> _pages = [KCChatPage(),KCFriendsPage(),KCDiscoverPage(), KCMinePage()];Set up an array to collect pages
  • currentIndex: Tracks the currently clicked button to jump to the corresponding page
  • onTap: As user response -> Modify status!

Let’s go over here and look at the page style, isn’t it pretty simple? 😸 Flutter knows who uses it

③ Start page & icon Settings

A: iOS Settings

  • Open iOS Projects -> Runner -> delete the original Flutter icon

  • Change the Bundle name to wechat

B: the Android Settings

  • Androidmanifest.xml -> android:label=” wechat “modify the project display name

  • drawable -> launch_background

   <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item>
Copy the code
  • pubspec.yamlOpen comments to facilitate icon Settings in the back of the project
  assets:
    - images/
Copy the code

Next: wechat project discovery page