Pageview Indicator Has Worm Animation Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Flutter PageView Indicator has Worm animation

Pageview Indicator Has Worm Animation Using Flutter App

Pageview Indicator Has Worm Animation

Step 1:
 
We cannot directly remove the time stamp from Pageview Indicator Has Worm Animation  but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  worm_indicator: ^0.2.4

step 2:
 
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. 
flutter pub get

Step 3:
 Open your project’s main.dart file and import material.dart and   worm_indicator: ^0.2.4. dart package.
import 'package:worm_indicator/shape.dart';
import 'package:worm_indicator/worm_indicator.dart';

Complete Code For Pageview Indicator Has Worm Animation  In Flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:worm_indicator/shape.dart';
import 'package:worm_indicator/worm_indicator.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: false,
      title: 'Worm Indicator Example',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightGreen,
          title: Text('Worm Indicator'),
        ),
        body: Example(),
      ),
    );
  }
}

class Example extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  PageController _controller;

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

  Widget buildPageView() {
    return PageView.builder(
      physics: AlwaysScrollableScrollPhysics(),
      controller: _controller,
      itemBuilder: (BuildContext context, int pos) {
        return Container(
          margin: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "Worm Indicator - Page $pos",
                style: TextStyle(
                  fontSize: 25,
                  color: Colors.black,
                ),
              )
            ],
          ),
        );
      },
      itemCount: 4,
    );
  }

  Widget buildExampleIndicatorWithShapeAndBottomPos(
      Shape shape, double bottomPos) {
    return Positioned(
      bottom: bottomPos,
      left: 0,
      right: 0,
      child: WormIndicator(
        length: 3,
        controller: _controller,
        shape: shape,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final circleShape = Shape(
      size: 16,
      shape: DotShape.Circle,
      spacing: 8,
    );
    final squareShape = Shape(
      size: 16,
      shape: DotShape.Square,
      spacing: 8,
    );
    return Scaffold(
      body: Stack(
        children: <Widget>[
          buildPageView(),
          buildExampleIndicatorWithShapeAndBottomPos(circleShape, 20),
          buildExampleIndicatorWithShapeAndBottomPos(squareShape, 56),
        ],
      ),
    );
  }
}

 

Related Post