I have been looking at the layout and characteristics of Flutter these days. I plan to build an application from scratch. Some articles may be stopped during the process due to some reasons, but I will slowly make up for them.

Learn mobile routines:

When you learn mobile development, you generally follow these steps,

  • The UI layout,
  • Route jump,
  • Network request,
  • Pages interact with data.

Of course, the next series will follow the same steps

The effect

Today, let’s build a basic layout. In the Android home page layout, most of them are in the form of Fragment+TabBottom. Let’s look at the effect picture first.

rendering

Begin to build

Dart is the interface that launches, returns the main layout as MainPage, and then goes

import 'package:flutter/material.dart';
import 'package:codelang/MainPage.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: MainPage(), ); }}Copy the code

MainPage

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'package:codelang/page/MsgPage.dart';
import 'package:codelang/page/HomePage.dart';
import 'package:codelang/page/ShopPage.dart';
import 'package:codelang/page/MyPage.dart';
import 'package:codelang/widget/Demo1.dart';


class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: <String, WidgetBuilder>{
          "/Demo1": (BuildContext context) => new Demo1(),
        },
        home: new MainPageWidget());
  }
}

class MainPageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MainPageState();
  }
}
class MainPageState extends State<MainPageWidget> {
  int _tabIndex = 0;
  var tabImages;
  var appBarTitles = ['home'.'shops'.'message'.'I']; */ image getTabImage(path) {*/ image getTabImage(path) {returnNew image. asset(Path, width: 20.0, height: 20.0); } /* * get the corresponding normal or press icon */ Image getTabIcon(int curIndex) {if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    returntabImages[curIndex][0]; } /* * get bottomTab's color and Text */ Text getTabTitle(int curIndex) {if (curIndex == _tabIndex) {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(color: const Color(0xff63ca6c)));
    } else {
      returnnew Text(appBarTitles[curIndex], style: new TextStyle(color: const Color(0xff888888))); }} /* * Store four pages, same as Fragment */ var _bodys; voidinitData() {/* bottom press image */ tabImages = [[getTabImage()'images/ic_home_normal.png'),
        getTabImage('images/ic_home_press.png')
      ],
      [
        getTabImage('images/ic_shop_normal.png'),
        getTabImage('images/ic_shop_press.png')
      ],
      [
        getTabImage('images/ic_msg_normal.png'),
        getTabImage('images/ic_msg_press.png')
      ],
      [
        getTabImage('images/ic_my_normal.png'),
        getTabImage('images/ic_my_press.png')]]; _bodys = [ new HomePage(), new ShopPage(), new MsgPage(), new MyPage() ]; } @override Widget build(BuildContext context) { initData(); // TODO: implement buildreturn Scaffold(
      appBar: new AppBar(
        title: new Text("Home page"), ), body: _bodys[_tabIndex], bottomNavigationBar: new BottomNavigationBar( items: <BottomNavigationBarItem>[ new BottomNavigationBarItem( icon: getTabIcon(0), title: getTabTitle(0)), new BottomNavigationBarItem( icon: getTabIcon(1), title: getTabTitle(1)), new BottomNavigationBarItem( icon: getTabIcon(2), title: GetTabTitle (2)), new BottomNavigationBarItem(icon: getTabIcon(3), title: getTabTitle(3)),], // Set the mode to displaytype: BottomNavigationBarType fixed, / / set the current index currentIndex: _tabIndex, / / tabBottom click monitor onTap: (index) {setState(() { _tabIndex = index; }); },),); }}Copy the code

In the main interface, four tabs at the bottom of the Page are defined using bottomNavigationBar. In the body part, you can switch between pages in _bodys using _tabIndex. Here, I define four pages: HomePage, ShopPage, MsgPage, MyPage. These four pages are the same, just send one out to see, others are the same

import 'package:flutter/material.dart';
class MsgPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        body: new Center(child:new Text("News")))); }}Copy the code

Yaml defines the path to place an Image behind assets as follows: The path to place an Image behind assets can be identified and used by Image

flutter:
  assets:
    - images/ic_home_normal.png
    - images/ic_home_press.png
    - images/ic_shop_normal.png
    - images/ic_shop_press.png
    - images/ic_msg_normal.png
    - images/ic_msg_press.png
    - images/ic_my_normal.png
    - images/ic_my_press.png
Copy the code

Ok, that’s the basic framework