https://github.com/taylanyildiz/cf_indicator
Page view responsive indicator on page view widget
https://github.com/taylanyildiz/cf_indicator
android desktop indicator ios web
Last synced: 4 months ago
JSON representation
Page view responsive indicator on page view widget
- Host: GitHub
- URL: https://github.com/taylanyildiz/cf_indicator
- Owner: taylanyildiz
- License: mit
- Created: 2021-04-19T14:52:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-23T20:21:56.000Z (about 5 years ago)
- Last Synced: 2025-10-22T23:19:57.499Z (8 months ago)
- Topics: android, desktop, indicator, ios, web
- Language: Dart
- Homepage:
- Size: 81.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cf_indicator
Page View Indicator.
## Screenshots
## Usage
[Example](https://github.com/taylanyildiz/cf_indicator/blob/master/example/example.dart)
To use this package :
* add the dependency to your [pubspec.yaml](https://github.com/taylanyildiz/cf_indicator/blob/master/pubspec.yaml) file.
## dependencies:
```yaml
dependencies:
flutter:
sdk: flutter
cf_indicator: "^0.0.8"
```
## How to use
## import
```dart
import 'package:cf_indicator/cf_indicator.dart';
```
## example
```dart
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),
),
```
```dart
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] type
/// We have assets path insede it has 3 images [Movie Images]
class Images {
static final imageslist = [
"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 {
// 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](https://flutter.dev/developing-packages/),
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](https://flutter.dev/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.