cf_indicator

Page View Indicator.

Screenshots

Usage

Example

To use this package :

dependencies:

  dependencies:
    flutter:
      sdk: flutter
    cf_indicator: "^0.0.7"

How to use

import

import 'package:cf_indicator/cf_indicator.dart';

example

  PageIndicator(
    // controller: _pageController,
    // height: 300.0,
    // width: 200.0,
    //backgroundColor: Colors.blue,
    value: .5, // must be between 1.0 and 0.0 or null
    onPageChanged: (value) => print(value),
    page: Images.imageslist.length,
    builder: (context, index) => _displayWidget(context, index),
    // you have default indicator. if you want change add indicator class 
    // you don't have to fill every value in indicator. You can change what value[s] you want to change 
    // indicator: Indicator(indicatorColor: Colors.blue),
    <!-- indicator: Indicator(
      indicatorBackColor: Colors.grey,
      indicatorColor: Colors.orange,
      radius: 10.0,
      thickness: -4.0,
      space: 10.0,
      ), -->
    
  ),
   void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: true,
      title: 'Page View Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(title: 'Page View Indicator'),
    );
  }
}

/// [Images] class for example app [List<String>] type
/// We have assets path insede it has 3 images [Movie Images]
class Images {
  static final imageslist = <String>[
    "assets/images/anatolia.png",
    "assets/images/god_father.png",
    "assets/images/social_network.png",
  ];
}

class HomeScreen extends StatefulWidget {
  final String title;
  HomeScreen({
    Key key,
    @required this.title,
  }) : super(key: key);
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

/// [_pageController] is not default Controller if we want create a [PageController] and can use in our pageView,
class _HomeScreenState extends State<HomeScreen> {
  // PageController _pageController;
  @override
  void initState() {
    super.initState();
    // _pageController = PageController(initialPage: 1, viewportFraction: .5);
  }

  /// [_displayWidget] showing child widget we have
  Widget _displayWidget(context, index) {
    return Image.asset(
      Images.imageslist[index],
      fit: BoxFit.cover,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PageIndicator(
              indicator: Indicator(
                indicatorBackColor: Colors.grey,
                indicatorColor: Colors.orange,
                radius: 10.0,
                thickness: -4.0,
                space: 10.0,
              ),
              // height: 300.0,
              // width: 200.0,
              //backgroundColor: Colors.blue,
              value: .5, // must be between 1.0 and 0.0 or null
              onPageChanged: (value) => print(value),
              page: Images.imageslist.length,
              // controller: _pageController,
              builder: (context, index) => _displayWidget(context, index),
            ),
          ],
        ),
      ),
    );
  }
}

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Libraries

cf_indicator