Skip to content

Instantly share code, notes, and snippets.

@Rahiche

Rahiche/Flutter Animate on Scroll Example.dart

Last active August 7, 2023 03:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rahiche/a6fa42a38cd5aef6f7b01e2859c722a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rahiche/a6fa42a38cd5aef6f7b01e2859c722a3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Rahiche revised this gist Dec 20, 2018. 1 changed file with 16 additions and 9 deletions.
    25 changes: 16 additions & 9 deletions Flutter Animate on Scroll Example.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    import 'dart:math' as math;
    import 'package:flutter/material.dart';
    import 'package:vector_math/vector_math_64.dart' as vectors;

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

    @@ -119,14 +118,14 @@ class _AnimateOnScrollFlutterState extends State<AnimateOnScrollFlutter> {

    ///math math
    class CirclePainter extends CustomPainter {
    double overallPercent = 0.0;
    CirclePainter(this.overallPercent);
    double overallPercent;

    double circleSize = 25.0;
    CirclePainter(this.overallPercent);

    @override
    void paint(Canvas canvas, Size size) {
    double angle = vectors.degrees2Radians * ((overallPercent * 359.99 / 100));
    double circleSize = 25.0;
    double angle = math.pi / 180.0 * ((overallPercent * 360 / 100));
    double line = overallPercent * (size.width - circleSize) / 100;
    final paint = Paint()
    ..color = Colors.white
    @@ -136,7 +135,7 @@ class CirclePainter extends CustomPainter {
    if (overallPercent < 50) {
    path.addPolygon([
    Offset(0.0, size.height),
    Offset((line * 2) + 3, size.height),
    Offset((line * 2), size.height),
    ], false);
    }
    if (overallPercent > 50) {
    @@ -145,14 +144,22 @@ class CirclePainter extends CustomPainter {
    size.width - (circleSize * 2), 0.0, circleSize * 2, size.height),
    math.pi / 2,
    -angle * 2,
    true);
    if (overallPercent < 99) {
    false);
    if (overallPercent < 100) {
    path.addPolygon([
    Offset(overallPercent * (size.width - circleSize) / 99, size.height),
    Offset(overallPercent * (size.width - circleSize) / 100, size.height),
    Offset(size.width - circleSize, size.height),
    ], false);
    }
    if (overallPercent == 100) {
    path.addArc(
    Rect.fromLTWH(size.width - (circleSize * 2), 0.0, circleSize * 2,
    size.height),
    math.pi / 2,
    math.pi * 2);
    }
    }

    canvas.drawPath(path, paint);
    }

  2. Rahiche renamed this gist Dec 19, 2018. 1 changed file with 0 additions and 0 deletions.
    0 Flutter Animate on Scroll Example → Flutter Animate on Scroll Example.dart
    View file
    File renamed without changes.
  3. Rahiche created this gist Dec 19, 2018.
    163 changes: 163 additions & 0 deletions Flutter Animate on Scroll Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,163 @@
    import 'dart:math' as math;
    import 'package:flutter/material.dart';
    import 'package:vector_math/vector_math_64.dart' as vectors;

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

    class TestApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
    body: Center(
    child: AnimateOnScrollFlutter(),
    ),
    ),
    );
    }
    }

    class AnimateOnScrollFlutter extends StatefulWidget {
    @override
    _AnimateOnScrollFlutterState createState() => _AnimateOnScrollFlutterState();
    }

    class _AnimateOnScrollFlutterState extends State<AnimateOnScrollFlutter> {
    final controller = ScrollController();
    double appBarHeight = 200.0;

    @override
    Widget build(BuildContext context) {
    return SafeArea(
    child: CustomScrollView(
    controller: controller,
    slivers: <Widget>[
    SliverAppBar(
    pinned: true,
    expandedHeight: appBarHeight,
    floating: true,
    flexibleSpace: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
    double percent = ((constraints.maxHeight - kToolbarHeight) *
    100 /
    (appBarHeight - kToolbarHeight));
    return Stack(
    children: <Widget>[
    Image.asset(
    "assets/head-background.jpg",
    fit: BoxFit.cover,
    height: double.infinity,
    width: double.infinity,
    ),

    // Custom Paint
    Container(
    height: kToolbarHeight,
    child: Row(
    children: <Widget>[
    Flexible(
    child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: CustomPaint(
    size: Size.fromHeight(kToolbarHeight),
    painter: CirclePainter(100 - percent),
    ),
    ),
    ),
    ],
    ),
    ),

    // Text and Icon
    Padding(
    padding: const EdgeInsets.only(right: 13.0),
    child: Container(
    height: kToolbarHeight,
    child: Row(
    children: <Widget>[
    Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
    "Flutter is Awesome ",
    style: TextStyle(color: Colors.white),
    ),
    ),
    Spacer(),
    GestureDetector(
    onTap: () {
    controller.animateTo(-appBarHeight,
    duration: Duration(seconds: 4),
    curve: Curves.fastOutSlowIn);
    },
    child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Icon(
    Icons.menu,
    color: Colors.white,
    ),
    ),
    ),
    ],
    ),
    ),
    ),
    ],
    );
    },
    ),
    ),
    SliverList(delegate:
    SliverChildBuilderDelegate((BuildContext context, int index) {
    return ListTile(title: Text("Flutter / $index"));
    }))
    ],
    ),
    );
    }
    }

    ///math math
    class CirclePainter extends CustomPainter {
    double overallPercent = 0.0;
    CirclePainter(this.overallPercent);

    double circleSize = 25.0;

    @override
    void paint(Canvas canvas, Size size) {
    double angle = vectors.degrees2Radians * ((overallPercent * 359.99 / 100));
    double line = overallPercent * (size.width - circleSize) / 100;
    final paint = Paint()
    ..color = Colors.white
    ..strokeWidth = 2.0
    ..style = PaintingStyle.stroke;
    final path = Path();
    if (overallPercent < 50) {
    path.addPolygon([
    Offset(0.0, size.height),
    Offset((line * 2) + 3, size.height),
    ], false);
    }
    if (overallPercent > 50) {
    path.arcTo(
    Rect.fromLTWH(
    size.width - (circleSize * 2), 0.0, circleSize * 2, size.height),
    math.pi / 2,
    -angle * 2,
    true);
    if (overallPercent < 99) {
    path.addPolygon([
    Offset(overallPercent * (size.width - circleSize) / 99, size.height),
    Offset(size.width - circleSize, size.height),
    ], false);
    }
    }
    canvas.drawPath(path, paint);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
    }
    }