Flutter 带有小部件列表的 Swiper

Question

I'm creating an application where there is a scroll view made up using Flutter_Swiper . The problem is that I can't figure out how to put a list of widget inside the Swiper. Let me explain with an example:

  Widget build(BuildContext context) {
  return new Container(
     child: new Swiper(
       itemBuilder: (BuildContext context, int index) {
          return MyWidget(id: 1, text: "hello");

       },
     itemCount: 10,
     viewportFraction: 0.8,
     scale: 0.85,
     )
  );
  }

This is the code that the official wiki has provided to me, it works but obviously it shows me the same widget every times.
So, to do this, I created a structure like this:

class MyStructure{
   final int id;
   final String text;
   MyStructure({this.id, this.text});
}

Then I created a widget like this:

class MyWidget extends StatelessWidget{
   final MyStructure widgetStructure;
   MyWidget(this.widgetStructure);

   @override
   Widget build(BuildContext context) {
      return Container(
         child: Text(widgetStructure.id, widgetStructure.text);
         ...
      )
   }
}

Then I created a list of structures like this:

  List<MyStructure> widgetList;
  widgetList= [MyStructure(
     id = 1;
     text = "a text"
  )];

So, now I could create a list of widget just doing something like this:

return new Row(children: widgetList.map((item) => new MyWidget(item)).toList());

And, in theory, it works but I don't know how to use it with the swiper.

Answer 1

In demo, widgetList length is 10. you can see full code below

full code

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new InnerSwiper(),
    );
  }
}

class MyStructure {
  final int id;
  final String text;
  MyStructure({this.id, this.text});
}

class MyWidget extends StatelessWidget {
  final MyStructure widgetStructure;
  MyWidget(this.widgetStructure);

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Text('${widgetStructure.id} ${widgetStructure.text}')
    );
  }
}

class InnerSwiper extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _InnerSwiperState();
  }
}

class _InnerSwiperState extends State<InnerSwiper> {
  SwiperController controller;

  List<bool> autoplayes;

  List<SwiperController> controllers;
  List<MyStructure> widgetList = [];

  @override
  void initState() {
    controller = new SwiperController();
    autoplayes = new List()
      ..length = 10
      ..fillRange(0, 10, false);
    controllers = new List()
      ..length = 10
      ..fillRange(0, 10, new SwiperController());

    for(int i=0;i < 10; i++) {
      widgetList.add(MyStructure(id:i,text: ' this is index ${i}'));
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: new Scaffold(
        body: new Swiper(
          loop: false,
          itemCount: widgetList.length,
          controller: controller,
          pagination: new SwiperPagination(),
          itemBuilder: (BuildContext context, int index) {
            return new Column(
              children: <Widget>[
                new SizedBox(
                  child: new Swiper(
                    controller: controllers[index],
                    pagination: new SwiperPagination(),
                    itemCount: widgetList.length,
                    itemBuilder: (BuildContext context, int index) {
                      return MyWidget(widgetList[index]);
                    },
                    autoplay: autoplayes[index],
                  ),
                  height: 300.0,
                ),
                new RaisedButton(
                  onPressed: () {
                    setState(() {
                      autoplayes[index] = true;
                    });
                  },
                  child: new Text("Start autoplay"),
                ),
                new RaisedButton(
                  onPressed: () {
                    setState(() {
                      autoplayes[index] = false;
                    });
                  },
                  child: new Text("End autoplay"),
                ),
                new Text("is autoplay: ${autoplayes[index]}")
              ],
            );
          },
        ),
      ),
    );
  }
}

Answer 2

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class NewSetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Widget> steps = [
      _step0(),
      _step1(),
      _step2(),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text('New set'),
      ),
      body: SafeArea(
        top: true,
        bottom: true,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return steps[index];
          },
          loop: false,
          itemCount: steps.length,
          control: new SwiperControl(),
        ),
      ),
    );
  }

  Widget _step0() {
    return TextField(
      decoration: InputDecoration(labelText: "Add Elements"),
      onSubmitted: (elem) {
      },
    );
  }

  Widget _step1() {
    return Text("This is the step 1");
  }

  Widget _step2() {
    return Text("This is the step 2");
  }
}