flattern wie kann ich Kreis Animation wie diese erstellen?

stimmen
-2

Ich möchte Kreis Animation für Profilbild wie instagram Geschichte so etwas wie implementieren diese .
Wie kann ich das erreichen?

Veröffentlicht am 07/11/2018 um 23:51
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
2

Sie können versuchen , das mit dashed_circle Paket instagram Geschichte wie Kreis (auf dem Bild sehen unten) zu erstellen. Um eine einfache Spinn Version erstellen können Sie zwei Dreh fügen Sie die Verwendung von Transform.rotate Konstruktor.

Die erste Drehung hat das übergeordnete Widget des gestrichelten Kreises sein. Die zweite Rotation sollte den Kind-Widget des gestrichelten Kreises mit dem entgegengesetzten Winkel des ersten Dreh umgeben.

Um die Wirkung der Striche zu erstellen , um eine einzige Zeile slowling verschmelzenden, können Sie langsam die Lücke Eigenschaft der Abnahme dashed_circle.

Ich gab ihm gehen und versuchte, mich auf eine schnelle Demo, Sie eine Beispiel-Implementierung zu zeigen:

Bill Gates Geschichte

import 'package:flutter/material.dart';
import 'package:dashed_circle/dashed_circle.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(),
      home: Scaffold(
        body: Center(
          child: RotateAnimationDemo(),
        ),
      ),
    );
  }
}

class RotateAnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RotateAnimationDemoState();
}

class RotateAnimationDemoState extends State<RotateAnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  Animation base;
  Animation inverted;
  Animation gap;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));

    base = CurvedAnimation(parent: controller, curve: Curves.easeOut);

    inverted = Tween<double>(begin: 0.0, end: -1.0).animate(base);

    gap = Tween<double>(begin: 3.0, end: 0.0).animate(base)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => controller.forward(),
      child: RotationTransition(
        turns: base,
        child: DashedCircle(
          gapSize: gap.value,
          dashes: 20,
          color: Colors.deepOrange,
          child: RotationTransition(
            turns: inverted,
            child: Padding(
              padding: const EdgeInsets.all(7.0),
              child: CircleAvatar(
                radius: 60.0,
                backgroundImage: NetworkImage(
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Bill_Gates_Buys_Skype_%285707954468%29.jpg/2560px-Bill_Gates_Buys_Skype_%285707954468%29.jpg'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Beantwortet am 08/11/2018 um 13:28
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more