# 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
-
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⚠️
-
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
-
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