sing_page_indicator 0.0.1

Page indicator for flutter, with multiple build-in layouts.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sing_page_indicator/enum/page_indicator_layout.dart';
import 'package:sing_page_indicator/flutter_page_indicator.dart';
import 'package:sing_transformer_page_view/controller/transformer_page_controller.dart';
import 'package:sing_transformer_page_view/transformer_page_view.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  double size = 20.0;
  double activeSize = 30.0;

  var controller;

  PageIndicatorLayout layout = PageIndicatorLayout.SLIDE;

  List<PageIndicatorLayout> layouts = PageIndicatorLayout.values;

  bool loop = false;

  @override
  void initState() {
    controller = PageController();
    super.initState();
  }

  @override
  void didUpdateWidget(MyHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    var children = <Widget>[
      Container(color: Colors.red,),
      Container(color: Colors.green,),
      Container(color: Colors.blueAccent,),
      Container(color: Colors.grey,)
    ];
    return Scaffold(
        appBar: AppBar(title: const Text('Flutter Demo Home Page')),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Checkbox(
                  value: loop,
                  onChanged: (value) {
                    setState(() {
                      if (value ?? false) {
                        controller = TransformerPageController(itemCount: 4, loop: true);
                      } else {
                        controller = PageController(initialPage: 0,);
                      }
                      loop = value ?? false;
                    });
                  }),
                const Text("loop"),
              ],
            ),
            RadioGroup(
              titles: layouts.map((s) {
                var str = s.toString();
                return str.substring(str.indexOf(".") + 1);
              }).toList(),
              onIndexChanged: (int index) {
                setState(() {
                  layout = layouts[index];
                });
              },
            ),
            Expanded(
              child: Stack(
                children: <Widget>[
                  loop
                    ?
                    TransformerPageView.children(
                      pageController: controller,
                      children: children,
                    )
                    :
                    PageView(
                      controller: controller,
                      children: children,
                    ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 20.0),
                      child: PageIndicator(
                        layout: layout,
                        size: size,
                        activeSize: activeSize,
                        controller: controller,
                        space: 5.0,
                        count: 4,
                      ),
                    ),
                    )
                  ],
                ))
          ],
        ));
  }
}

class RadioGroup extends StatefulWidget {
  final List<String> titles;

  final ValueChanged<int>? onIndexChanged;

  const RadioGroup({Key? key, required this.titles, this.onIndexChanged}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _RadioGroupState();
  }
}

class _RadioGroupState extends State<RadioGroup> {
  int _index = 1;

  @override
  Widget build(BuildContext context) {
    List<Widget> list = [];
    for (int i = 0; i < widget.titles.length; ++i) {
      list.add(((String title, int index) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Radio<int>(
                value: index,
                groupValue: _index,
                onChanged: (index) {
                  setState(() {
                    _index = index ?? 0;
                    if(null != widget.onIndexChanged){
                      widget.onIndexChanged!(_index);
                    }
                  });
                }),
            Text(title)
          ],
        );
      })(widget.titles[i], i));
    }

    return Wrap(
      children: list,
    );
  }
}