# 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

Prior to the start please

  1. Follow the steps in preparing for the preparation of the X process GridNav layout by Flutter step by step.

  2. Implement x process GridNav layout according to Flutter step by step.

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

Implement the layout of the hotel line

  1. Replace // todo: add hotel row with

    child: Row(
  children: <Widget>[
    // todo: add hotel row items],),Copy the code

  2. In the Widget _travelRow () {… Add the following code implementation below the function

    // todo: add imageUrl, imgWidth,title. 
Widget _firstBGimageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Stack(
        alignment: Alignment.bottomRight,
        children: <Widget>[
          _bgImagePositioned(
            _hotelBGImageUrl,
            width: imgWidth,
          ),
          _firstTitlePositioned('hotel'),
        ],
      ),
    ),
    flex: 31,); } Widget _firstTitlePositioned(String title) {
  return Positioned(
    left: 15,
    top: 25,
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}

Widget _bgImagePositioned(String imageUrl, {double width = 73{})return Positioned(
    child: Image.network(
      imageUrl,
      width: width,
      fit: BoxFit.fill,
    ),
  );
}

Copy the code

    Note:

    • Flex: 31 in _firstBGimageStack is based on the scale of the Flex layout on the web page. Flex: 23, Flex 46, etc.

    • FractionallySizedBox(widthFactor: 1,heightFactor: 1) is used to fill the entire layout space of the parent node. WidthFactor: 1 represents the ratio of the full width, and heightFactor: 1 represents the full height.

  3. Add the following code below // todo: Add Hotel Row Items

    _firstBGimageStack(),
Copy the code

    Save the changes CMD + S, the interface is hot updated as follows

  4. In the Widget _bgImagePositioned () {… Add a second column of Stack layout code with a background image (including adding a left border) below the function:

    // todo: add imageUrl, imgWidth,title. 
Widget _secondBGImageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
        ),
        child: Stack(
          alignment: Alignment.bottomLeft,
          children: <Widget>[
            _bgImagePositioned(
              _minsuBGImageUrl,
              width: 37,
            ),
            _commonTitle('Homestay · Inn'),
          ],
        ),
      ),
    ),
    flex: 23,); } Widget _commonTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}
Copy the code

  5. Add _secondBGImageStack() under // todo: add hotelRow items to _hotelRow(), CMD +s

  6. Add platform view layout code in Widget _commonTitle(String title){… Add the following code below the function:

    Widget _platformBGImageStack() {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
          gradient: LinearGradient(colors: _platformColors),
        ),
        child: Stack(
          alignment: Alignment.bottomRight,
          children: <Widget>[
            _bgImagePositioned(_platformBGImage, width: 86),
            _platformTitle('Air ticket/train ticket + Hotel'),
            // todo: add platform tag
          ],
        ),
      ),
    ),
    flex: 46,); } Widget _platformTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _platformStyle,
    ),
  );
}
Copy the code

    Add it under // todo: Add Hotel Row Items under the _hotelRow() method

    _platformBGImageStack(),
Copy the code

    If CMD +s is saved and heated, the interface is as follows:

  7. Implement convenient and inexpensive layout in Widget _platformTitle(String title) {… Add the following code below the function

    Widget _platformTagTilte(String title) {
  return Center(
    child: Padding(
      padding: EdgeInsets.only(
        bottom: 32,
        left: 38,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Color(0xfff54c45),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(7),
            topRight: Radius.circular(7),
            bottomRight: Radius.circular(7),
          ),
        ),
        padding: EdgeInsets.fromLTRB(5.0.5.0),
        child: Text(
          title,
          style: TextStyle(
            color: Color(0xffffffff),
            fontSize: 12,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    ),
  );
}
Copy the code

    // todo: add platform tag to _platformTagTilte(‘ convenient and cheap ‘)

So far the layout of the hotel line has been completed 🎉

# Complete flightRow and travelRow

We have wrapped the _firstBGimageStack and _secondBGImageStack functions. We add the necessary parameters to them to change the background image and title. Now we can start:

  1. Todo: add imageUrl, imgWidth,title. Widget _firstBGimageStack(){line of code, replace with:

    Widget _firstBGimageStack({
  @required String imageUrl,
  double imgWidth = 73.String title,
}) {
Copy the code

    // Todo: add imageUrl, imgWidth,title. Todo: Add imageUrl, imgWidth,title. Note;

  2. // todo: add imageUrl, imgWidth,title. Widget _secondBGImageStack() {line of code, replace with the following:

    Widget _secondBGImageStack({
  @required String imageUrl,
  double imgWidth = 37.String title,
}) {
Copy the code

    Replace the internal _minsuBGImageUrl with the passed imageUrl, 73 with the passed imgWidth, b&B · inn with the passed title, and delete // todo: add imageUrl, imgWidth,title. Note;

  3. Call _firstBGimageStack() and _secondBGImageStack() from _hotelRow

    _firstBGimageStack(
  imageUrl: _hotelBGImageUrl,
  title: 'hotel',
),
_secondBGImageStack(
  imageUrl: _minsuBGImageUrl,
  title: 'Homestay · Inn',),Copy the code

    Delete // todo: add hotel Row Items remarks, then CMD +s save and hot update interface should remain unchanged;

  4. Add an items layout without a background image

    Widget _noBGImageStack({@required String title}) {
  return Expanded(
    child: FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            left: _borderSide,
          ),
        ),
        child: _commonTitle(title),
      ),
    ),
    flex: 23,); } Widget _commonTitle(String title) {
  return Center(
    child: Text(
      title,
      style: _titleStyle,
    ),
  );
}
Copy the code

  5. Start by replacing // todo: add flightRow in _flightRow() with the following code;

    child: Row(
  children: <Widget>[
    _firstBGimageStack(
      imageUrl: _flightBGImageUrl,
      imgWidth: 79,
      title: 'plane',
    ),
    _secondBGImageStack(
      imageUrl: _trainBGImage,
      imgWidth: 37,
      title: 'Train ticket',
    ),
    _noBGImageStack(title: 'Car · Boat Ticket'),
    _noBGImageStack(title: 'Car Rental'),,),Copy the code

    Then CMD + S save and hot update the interface is as follows:

  6. Also replace // todo: add Travel Row in _travelRow with the following code:

    child: Row(
  children: <Widget>[
    _firstBGimageStack(
      imageUrl: _tripBGImage,
      imgWidth: 93,
      title: 'travel',
    ),
    _secondBGImageStack(
      imageUrl: _dingzhiBGImage,
      imgWidth: 61,
      title: 'High Speed Rail Tour',
    ),
    _noBGImageStack(title: 'Cruise'),
    _noBGImageStack(title: 'Customized Tour'),,),Copy the code

    Then CMD +s saves

At this point, the entire code of this article is over, thank you for reading, and I hope you can follow their own hands-on test;

The Flutter implements the GirdNav layout of Ctrip

Attached is the DEOM address