cf_indicator 0.0.9 copy "cf_indicator: ^0.0.9" to clipboard
cf_indicator: ^0.0.9 copied to clipboard

This package has a indicator with pageView on page.it's responsive and can change postion of indicator.

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.

1
likes
40
pub points
0%
popularity

Publisher

unverified uploader

This package has a indicator with pageView on page.it's responsive and can change postion of indicator.

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on cf_indicator