# 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:

# Preparations

Before starting, please follow the steps in preparation for implementing the GirdNav layout of Flutter.

Note: All of the following code changes are made in the grid_widget.dart file.

Add the overall layout

  1. Add the following code below the build function

    Widget _hotelRow() {
  return ClipRRect(
    // todo: add top corner
    child: Container(
      height: 65,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: _hotelColors,
          stops: [0.0.54],),),// todo: add hotel row)); } Widget _flightRow() {return Container(
    height: 65,
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: _flightColors,
        stops: [0.0.54],),// todo: add top border 
    ),
    // todo: add flight row
  );
}

Widget _travelRow() {
  return ClipRRect(
    // todo: add bottom corner
    child: Container(
      height: 65,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: _travelColors,
          stops: [0.0.54],),// todo: add top border 
      ),
      // todo: add travel row)); }Copy the code

    ⚠️ ClipRRect⚠️

  2. The build function

    // todo: add grid rows
return Container();
Copy the code

    Replace with:

    return Column(
  children: <Widget>[
	_hotelRow(),
	_flightRow(),
	_travelRow(),
  ],
);
Copy the code

    F5 run into the emulator and check

  3. Add corner and border:

    // Todo: add top corner

    borderRadius: BorderRadius.only(
  topLeft: const Radius.circular(8),
  topRight: const Radius.circular(8),),Copy the code

    // Todo: add bottom corner

    borderRadius: BorderRadius.only(
  bottomLeft: const Radius.circular(8),
  bottomRight: const Radius.circular(8),),Copy the code

    // todo: add top border

    border: Border(
  top: _borderSide,
),
Copy the code

    Then CMD + s will save the changes and the interface will be hot updated as follows:

At this point, the overall page layout is complete;

Next please move: Flutter implements ctrip GirdNav layout _hotel layout