Inscription – sword tianya, start from your drip accumulation, and will keep improving.

Flutter is Google’s latest mobile development framework.

[X1] Daily reminder of wechat public account at any time, daily accumulation, free to follow the bottom of the article scan code attention

【 X2 】 Various series of free open source video tutorials focus on you won’t get lost

【 X3 】 series article millions of Demo copy and paste use at any time

[x4] Five minute video takes you through the build quickly

【 X5 】 a glance at the source

As you can see in the picture below, your APP project will definitely use this scenario.

The Scaffold is built using the following code:

class Homepage extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    return_HomepageState(); }}Copy the code
class _HomepageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Rotation chart"), ), body: Container( child: buildBanner(), ), ); }... . }Copy the code

Combine the multicast map with the index indicator through the stacked layout Stack as follows:

  Widget buildBanner(a) {
    return Container(
      height: 200,
      width: double.infinity,
      child: Stack(
        children: [
          // select * from *
          buildBannerWidget(),
          / / indicator
          buildTipsWidget(),
        ],
      ),
    );
  }
Copy the code

The image is loaded using PageView, the code is as follows:

  buildBannerWidget() {
    // build in lazy loading mode
    return PageView.builder(
      // Build a layout for each subitem
      itemBuilder: (BuildContext context, int index) {
        return buildPageViewItemWidget(index);
      },
      / / controller
      controller: _pageController,
      // The number of rounds is infinite.
      itemCount: imageList.length * 10000.//PageView slides back
      onPageChanged: (intindex) { setState(() { currentIndex = index; }); }); }Copy the code

Each subitem built in PageView is just an image, and the code looks like this:


  // Display images in rotation
  buildPageViewItemWidget(int index) {
    return Image.asset(
      imageList[index % imageList.length],
      fit: BoxFit.fill,
    );
  }
Copy the code
  / / indicator
  buildTipsWidget() {
    return Positioned(
      bottom: 20,
      right: 20,
      child: Container(
        / / padding
        padding: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
        // Rounded border
        decoration: BoxDecoration(
          / / the background
            color: Colors.white,
            // The border is rounded
            borderRadius: BorderRadius.all(Radius.circular(10))),
        child:
            Text("${currentIndex % imageList.length + 1}/${imageList.length}"),),); }Copy the code

The following data needs to be initialized:

  // The controller used by PageView
  PageController _pageController;
  // The timer automatically rotates
  Timer _timer;
  // Local resource image
  List<String> imageList = [
    "images/banner1.webp"."images/banner2.webp"."images/banner3.webp"."images/banner4.webp",];// The index currently displayed
  int currentIndex = 1000;
Copy the code

Timer creation and destruction code is as follows:

  @override
  void initState(a) {
    super.initState();
    // Initialize the controller
    // initialPage is the subitem displayed for initialization
    _pageController = new PageController(initialPage: currentIndex);

    /// the current page after drawing the first frame callback
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      startTimer();
    });
  }

  @override
  void dispose(a) {
    super.dispose();
    _timer.cancel();
  }

Copy the code

The timer multicast triggers the automatic switch of PageView, and the code is as follows:

  void startTimer(a) {
    // The interval is two seconds
    _timer = new Timer.periodic(Duration(milliseconds: 2000), (value) {
      print("Timer");
      currentIndex++;
      // Trigger a multicast switch
      _pageController.animateToPage(currentIndex,
          duration: Duration(milliseconds: 200), curve: Curves.ease);
      / / refresh
      setState(() {

      });
    });
  }
Copy the code

To xiaobian character, to achieve millions of Demo copy and paste at any time is certainly the need for source code

The full source code is here

Of course, with the character of xiaobian, there must be a video recording, click here to view, interested you can pay attention to the video of watermelon – young people who get up early