The Flutter step by step implements an X – process GridNav grid layout _ preparation work

# This article gains and value

After reading this series of articles, you will be able to make the following 100% restore ctrip V8.22.0 homepage GridNav interface:

You will use and become familiar with the following widgets:

• The Container and BoxDecoration;

• ClipRRect and BorderRadius;

• The Row with the Expanded;

• The Stack and Positioned;

• FractionallySizedBox;

# Preparations

• This article requires you to have a basic knowledge of Flutter. The specific functions of various widgets are not covered in this article.

• If you are familiar with or know how to use Chrome for H5 interface debugging, it is best. If not, it does not matter, I have put all the resources you need in the code;

All right, let’s get started:

1. Chorme opened a new page, press F12 into debugging, the address bar enter http://m.ctrip.com/html5/, enter, you will see the following interface:

   

Now you can view ctrip H5 page layout and color, font and other configurations (not important here: relevant configurations have been posted in the code);

2. To create a Flutter project named Ctrip_gird_demo, I used VSCode here, because Android Studio 3.6.2 was too slow on my computer. I tried all kinds of methods, but I still could not solve the lag and the high CPU usage.

3. Remove all the code in main.dart and add the following code;

   import 'package:flutter/material.dart';
   
   void main() => runApp(CtripGridApp());
   
   class CtripGridApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: Scaffold(
           appBar: AppBar(
             title: Text(
               Ctrip Grid Layout,
               style: TextStyle(fontSize: 18),
             ),
           ),
           body: Container(
             padding: EdgeInsets.only(top: 146),
             margin: EdgeInsets.only(left: 16, right: 16),
             // todo: add girdWidget),),); }}Copy the code

4. Create a new file named grid_widget.dart and add the configuration code that we got in 1 for colors, backgrounds, fonts, etc.

   import 'package:flutter/material.dart';
   
   class GridWidget extends StatelessWidget {
   
     final List<Color> _hotelColors = [
       Color(0xfffa5956),
       Color(0xfffb8650)];final List<Color> _platformColors = [
       Color(0xffffbc49),
       Color(0xffffd252)];final List<Color> _flightColors = [
       Color(0xff4b8fed),
       Color(0xff53bced)];final List<Color> _travelColors = [
       Color(0xff34c2aa),
       Color(0xff6cd557)];final String _hotelBGImageUrl =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
         
     final String _minsuBGImageUrl =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
         
     final String _platformBGImage =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
         
     final String _flightBGImageUrl =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
         
     final String _trainBGImage =
         'https://pic.c-ctrip.com/platform/h5/home/grid-nav-items-train.png';
         
     final String _tripBGImage =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
         
     final String _dingzhiBGImage =
         'https://pic.c-ctrip.com/platform/h5/home/[email protected]';
   
     final TextStyle _titleStyle = TextStyle(
       color: Colors.white,
       fontSize: 14,
       fontWeight: FontWeight.w600,
     );
   
     final TextStyle _platformStyle = TextStyle(
       color: Color(0xffa05416),
       fontSize: 14,
       fontWeight: FontWeight.w600,
     );
   
     final BorderSide _borderSide = BorderSide(
       color: Color(0xfff2f2f2),
       width: 1,);final Radius _radius = Radius.circular(8);
   
     @override
     Widget build(BuildContext context) {
     	// todo: add grid rows
       return Container();
   }
   Copy the code

5. Dart add import ‘Package :ctrip_gird_demo/grid_widget.dart’; Import the GridWidget and replace // todo: add girdWidget with child: GridWidget();

6. Now that we’re done with the preparation, we’ll implement the layout the same way we did with Row in Cloumn. We can see in 1 that the gridNav Row height is 64(H5’s borderTop 1px produces an additional 1px height), and we’ll start the formal layout code:

Ctrip GridNav layout – prepared article

Next please move to Flutter to achieve ctrip GirdNav layout