circular_rotation 0.0.2 copy "circular_rotation: ^0.0.2" to clipboard
circular_rotation: ^0.0.2 copied to clipboard

It is fully customizable package which allow you to set custom widget in circular manner.

example/lib/main.dart

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

import 'constants/const.dart';
import 'constants/dimens.dart';
import 'constants/images.dart';
import 'constants/strings.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Widget> _firstCircleImages = [];
  final List<Widget> _secondCircleImages = [];
  final List<Widget> _thirdCircleImages = [];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage(
              Images.galaxy,
            ),
          ),
        ),
        child: CircularRotation(
          circularRotationProperty: CircularRotationModel(
            firstCircleFill: true,
            secondCircleFill: true,
            thirdCircleFill: true,
            firstCircleFillColor: Colors.red,
            secondCircleFillColor: Colors.blue,
            thirdCircleFillColor: Colors.purple,
            defaultCircleStrokeWidth: Dimens.strokeSmall,
            defaultCircleStrokeColor: Colors.white,
            startAnimation: true,
            repeatAnimation: false,
            firstCircleAnimationDuration: Constants.firstCircleAnimationDurationInMilliseconds,
            secondCircleAnimationDuration: Constants.secondCircleAnimationDurationInMilliseconds,
            thirdCircleAnimationDuration: Constants.thirdCircleAnimationDurationInMilliseconds,
            centerWidget: const InkWell(
              onTap: CircularRotation.eitherStartOrStopAnimation,
              child: _GetProfile(
                name: Strings.tom,
                image: Images.center,
                radius: Dimens.radiusLarge,
              ),
            ),
            firstCircleWidgets: _firstCircleImages,
            secondCircleWidgets: _secondCircleImages,
            thirdCircleWidgets: _thirdCircleImages,
            thirdCircleRadians: Dimens.thirdCircleRadians,
            secondCircleRadians: Dimens.secondCircleRadians,
            firstCircleRadians: Dimens.firstCircleRadians,
          ),
        ),
      ),
    );
  }

  void generateImages() {
    var listOfNames = [
      Strings.dad,
      Strings.uncleP,
      Strings.cindy,
      Strings.sally,
      Strings.sammy,
      Strings.bob,
      Strings.aria,
    ];

    /// Adding images into first circle.
    _firstCircleImages.add(
      _GetProfile(name: listOfNames[4], image: Images.planet_5),
    );
    _firstCircleImages.add(
      _GetProfile(name: listOfNames[3], image: Images.planet_4),
    );
    _firstCircleImages.add(
      _GetProfile(name: listOfNames[6], image: Images.planet_7),
    );

    /// Adding images into second circle.
    _secondCircleImages.add(
      _GetProfile(name: listOfNames[1], image: Images.planet_2),
    );
    _secondCircleImages.add(
      _GetProfile(name: listOfNames[2], image: Images.planet_3),
    );
    _secondCircleImages.add(
      _GetProfile(name: listOfNames[5], image: Images.planet_6),
    );

    /// Adding images into third circle.
    _thirdCircleImages.add(
      _GetProfile(name: listOfNames[0], image: Images.planet_1),
    );
  }
}

class _GetProfile extends StatelessWidget {
  const _GetProfile({
    required this.name,
    required this.image,
    this.radius = Dimens.radiusNormal,
    Key? key,
  }) : super(key: key);
  final String name;
  final String image;
  final double radius;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _CircularImage(image: image, radius: radius),
        Text(
          name,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

class _CircularImage extends StatelessWidget {
  const _CircularImage({required this.image, required this.radius, Key? key}) : super(key: key);
  final String image;
  final double radius;

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: radius,
      backgroundImage: AssetImage(image),
      backgroundColor: Colors.transparent,
    );
  }
}
33
likes
130
pub points
75%
popularity

Publisher

verified publishermindinventory.com

It is fully customizable package which allow you to set custom widget in circular manner.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_rotation