vibram como posso criar círculo animação como este?

votos
-2

Eu gostaria de implementar círculo animação para imagem no perfil como história instagram algo como este .
Como posso conseguir isso?

Publicado 07/11/2018 em 23:51
fonte usuário
Em outras línguas...                            


1 respostas

votos
2

Você pode tentar usar o dashed_circle pacote para criar história instagram como círculo (olhar para a imagem abaixo). Para criar uma versão simples giro você pode adicionar dois rotação usando o Transform.rotate construtor.

A primeira rotação tem de ser o widget pai do círculo a tracejado. A segunda rotação deve cercar o widget filho do círculo pontilhado com o ângulo oposto da primeira rotação.

Para criar o efeito dos traços slowling fundindo a uma única linha, você pode diminuir lentamente a propriedade lacuna do dashed_circle.

Eu dei-lhe um ir e tentou me em uma demonstração rápida, para mostrar-lhe uma implementação exemplo:

Bill Gates História

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'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Respondeu 08/11/2018 em 13:28
fonte usuário

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