“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Simple page analysis

First of all, we find that the page is a ListView, but when writing, try to use a Container to wrap a layer, which can be extended, similar to the TabView in iOS.

We added a centerTitle property to the AppBar, which is specifically designed for Android. By default, the AppBar has a line at the bottom edge. We used elevation = 0 to hide this line.

  appBar: AppBar(
        centerTitle: true.// This property is designed for Android
        elevation: 0,
        title: Text('found'),Copy the code

Change the body to the ListView wrapped by the Container. The code now looks like this

class _DiscoverPageState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        title: Text('found'), ), body: Container( child: ListView(), ), ); }}Copy the code

Custom Cell

Ok, so let’s customize the cell. Write a stateless Widget first by default, and then modify it later if the state changes. Analysis:

  • Four parameters exposedtitle titleImageName subTitle subImageName, we can create a constructor using the following four parameters
  • The whole thing is a Row divided into two left and right halves, separated on the left and right sides of the spindleMainAxisAlignment.spaceBetween
  • The left and right pieces are also one child Row.
  • The sub attribute is optional so the syntax can use the ternary operator
  • The space between the image and the text on the left can be usedSizedBox(width: 15)

So the code looks like this:

import 'package:flutter/material.dart';

class DiscoverCell extends StatelessWidget {
  final String title;
  final String titleImageName;
  final String? subTitle;
  final String? subImageName;

  DiscoverCell({
    required this.title,
    required this.titleImageName,
    this.subTitle,
    this.subImageName,
  })  : assert(title ! =null.'Title cannot be empty'),
        assert(titleImageName ! =null.'titleImageName cannot be empty ');

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Image(
                    image: AssetImage(titleImageName),
                    width: 20,
                  ),
                  SizedBox(width: 15),
                  Text(title)
                ],
              )),
          Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  subTitle != null ? Text(subTitle!) : Text(' '), subImageName ! =null  ? Image.asset(subImageName!) : Container(),
                  Image(
                    image: AssetImage('images/icon_right.png'),
                    width: 15() [() [() [() [() }}Copy the code

Back to the DiscoverPage page, LIstView Chidren sets up the custom Widget above and runs:

The divider

You can use the code below to split the Row layout into two specific colors.

Row(children: [
         Container(width: 50, height: 0.5, color: Colors.white),
         Container(
           height: 0.5,
           color: Colors.grey,
         )
       ])
Copy the code

Push the jump

When we click on the cell, we want to jump to a new sub-page. In this case, modify the cell Build method. Introduces the new Widget GestureDetector, which has an onTap method where we handle click events.

  • onTap
  • OnTapDown: points down
  • OnTapCancel: Left

Here,Navigator._of_(context).pushIs aRoute<T>A subclass ofMaterialPageRoute. The construction of this function requires a Bulider

Click on it to find the type of this declaration:

final WidgetBuilder builder;
typedef WidgetBuilder = Widget Function(BuildContext context);
Copy the code

So it’s a function that takes BuildContext context.

 Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext context) =>
                DiscoverChildPage(title: title)));
Copy the code

The DiscoverChildPage is a new child page and requires the title parameter to be displayed as the title of the appBar.

import 'package:flutter/material.dart';

class DiscoverChildPage extends StatelessWidget {
  final String title;
  DiscoverChildPage({required this.title});
  @override
  Widget build(BuildContext context) {
    returnScaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Text(title), ), ); }}Copy the code

Description Changed from stateless to stateless

To change the cell from stateless to stateful: class _DiscoverCellState extends State

{} Members in DiscoverCell cannot be accessed here, use widget.title instead.