Details page, directly on the code:

class GankDetailPage extends StatefulWidget {
  GankDetailPage({Key key, this.gankBean}) : super(key: key);

  final GankBean gankBean;

  @override
  _GankDetailPageState createState() => new _GankDetailPageState(gankBean);
}

class _GankDetailPageState extends State<GankDetailPage> {
  final GankBean gankBean;

  _GankDetailPageState(this.gankBean);

  Widget detail(GankBean gankBean) {
    if (gankBean.images != null && gankBean.images.length > 0) {
      return new Scaffold(
        appBar: new AppBar(),
        body: ListView(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("who:${gankBean.who}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("type:${gankBean.type}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("description:${gankBean.desc}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("published:${gankBean.publishedAt}")),
                Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: CachedNetworkImage(
                    key: new ValueKey<String>(gankBean.images[0]),
                    imageUrl: gankBean.images[0],
                    placeholder: (context, url) =>
                        new CircularProgressIndicator(),
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(),
        body: ListView(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("who:${gankBean.who}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("type:${gankBean.type}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("description:${gankBean.desc}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("published:${gankBean.publishedAt}")),
              ],
            ),
          ],
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return detail(gankBean);
  }
}

listview is used here to show the content of the details page.

You can see some problems, for example, if I have a map, and if I have no map, I need to construct two widget s. I can't hide one and show one like android/ios. I haven't found a feasible solution yet.

If not, then, a complex page, due to the display and non-display of controls, the result will be a lot of types.