A new Flutter package for circle list.

Overview

circle_list

A new Flutter package for Circle List.

Add dependency

dependencies:
  circle_list: ^1.0.2

Super simple to use

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

class ShowDemoPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.white,),
      body: Center(
        child: CircleList(
          origin: Offset(0, 0),
          children: List.generate(10, (index) {
            return Icon(
              Icons.details,
              color: index % 2 == 0 ? Colors.blue : Colors.orange,
            );
          }),
        ),
      ),
    );
  }
}

image

If you want to add gradient background

CircleList(
          gradient: LinearGradient(
            colors: [Colors.redAccent, Colors.blueAccent],
          ),
          origin: Offset(0, 0),
          children: List.generate(10, (index) {
            return Icon(
              Icons.details,
              color: index % 2 == 0 ? Colors.blue : Colors.orange,
            );
          }),
        ),

image

Another background

CircleList(
          innerCircleColor: Colors.redAccent,
          outerCircleColor: Colors.greenAccent,
          origin: Offset(0, 0),
          children: List.generate(10, (index) {
            return Icon(
              Icons.details,
              color: index % 2 == 0 ? Colors.blue : Colors.orange,
            );
          }),
        )

image

CenterWidget

CircleList(
          origin: Offset(0, 0),
          children: List.generate(10, (index) {
            return Icon(
              Icons.details,
              color: index % 2 == 0 ? Colors.blue : Colors.orange,
            );
          }),
          centerWidget: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(100)),
              child: Image.asset("images/avator.jpg")),
        ),

image

Demo

image

The Demo Link

Params

  double innerRadius;
  double outerRadius;
  double childrenPadding;
  double initialAngle;
  Color outerCircleColor;
  Color innerCircleColor;
  Gradient gradient;
  Offset origin;
  List<Widget> children;
  bool isChildrenVertical;
  RotateMode rotateMode;
  bool innerCircleRotateWithChildren;
  bool showInitialAnimation;
  Widget centerWidget;
  RadialDragStart onDragStart;
  RadialDragUpdate onDragUpdate;
  RadialDragEnd onDragEnd;
  AnimationSetting animationSetting;
You might also like...

Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis

Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis

responsive_scaffold View the online demo here! On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

Dec 2, 2022

Csv to list for web - Convert a CSV into a list in order to populate a firebase database

Csv to list for web - Convert a CSV into a list in order to populate a firebase database

My goal is to convert a CSV into a list in order to populate a firebase database

Jan 26, 2022

Horizontal list - A horizontal list widget to use in mainly for web or desktop application

Horizontal list - A horizontal list widget to use in mainly for web or desktop application

horizontal_list A horizontal list widget with buttons next and previous. You can

Feb 2, 2022

A new Flutter package for navigations bar.

A new Flutter package for navigations bar.

flutter_navigations_bar A new Flutter package for navigations bar. Getting Started Bouncing Circle navigation bar properties : final Function(int) onc

Dec 15, 2022

A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by suryadevsingh.

A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by suryadevsingh.

CustomToggleSwitch A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by sur

Jun 9, 2020

A new Flutter package which helps you to implement Ticket Widget in your app.

A new Flutter package which helps you to implement Ticket Widget in your app.

flutter_ticket_widget A new Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and everything resid

Dec 22, 2022

BubbleShowcase is a small but power flutter package that allows you to highlight specific parts of your app to explain them to the user or to showcase your app new features.

BubbleShowcase BubbleShowcase is a small but powerful flutter package that allows you to highlight specific parts of your app (to explain them to the

Oct 26, 2022

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Jan 8, 2022

A new Flutter material DropdownButton package.

A Flutter material DropdownButton Plus package. platform enable Android ✔️ IOS ✔️ Web ✔️ Macos ✔️ Windows ✔️ Linux ✔️ Github pub.dev Getting started ?

Sep 7, 2022
Comments
  • add end angle

    add end angle

    Is it posible to add a property that allows to move only in a certain range of angles?. What i want is that the child widgets only move from 0º to 180º (half circle) and no more. Is possible to do that? Thanks your work help me a lot!

    opened by MeliGualaX 5
  • Add Null safety support and upgrade example to web

    Add Null safety support and upgrade example to web

    This PR fixes:

    • #7

    This PR includes:

    • [x] Null safety Migration
    • [x] Support web for example project
    • [x] Removal of unwanted code + rebuild android example files
    • [x] Update flare flutter to null safe version in example project.

    What needs to be done (from your end):

    • [ ] Update version in pubspec.yaml
    • [ ] Update version in CHANGELOG
    • [ ] Update README (if you want)
    • [ ] Publish to pub.dev

    Commands used:

    • dart migrate --apply-changes
    • dart analyze .
    • dart pub outdated --mode=null-safety
    • dart format . write
    • flutter create .
    opened by prateekmedia 0
  • How to determine direction & amount dragged?

    How to determine direction & amount dragged?

    Hi there!

    I'm trying to figure out how I can use this library to get the direction the user is dragging (clockwise or counter-clockwise) and the amount they have dragged. I see there is onDragUpdate , but I am not sure how to use the PolarCoord from that function to determine the direction and amount dragged.

    Any guidance would be greatly appreciated!

    opened by jonjon1123 3
  • Adding scrollphysics

    Adding scrollphysics

    Hi thanks for this package i was searching for something like that. I've got an issue and that is the way this list scrolls is not really effective for the user , because it doesn't stop a list item at the top at it's index , (something like the carousel slider) . Now can you create a parameter which takes a ScollPhysics class and apply it to the list ?

    opened by Loopex2019 5
Owner
Xiao Li
code fun,enjoy life
Xiao Li
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Dec 22, 2022
Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Mehran Jafari 10 Oct 29, 2022
Selectable Circle where colors can be customized and a child widget can be defined

selectable_circle A Flutter package for an Circle that can be Selected with animation. How to use SelectableCircle( width: 80.0, onSelected: (

null 11 Sep 29, 2021
A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

Mash Ibtesum 53 Oct 24, 2022
Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Ahmed Abdelkader Khedr 9 Nov 1, 2022
Api Call Check flutter - A new Flutter project that demonstrates api calling and displays them in a scrollable list

api_fetch A new Flutter project that demonstrates api calling and displays them

Babish Shrestha 0 Jan 2, 2022
Ali Türkay AVCI 1 Jan 20, 2022
Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

null 24 Dec 15, 2022
A Flutter based to do list app (yes, another to do list... but... this time based on a beautiful design)

✔️ Flutter to do App "To Do List" A Flutter app based on the design of the To Do App, created by Rudi Hartono, see more on: Uplabs. Getting Started ??

Johan 561 Dec 31, 2022
Product List Digikala - A List Of Product Digikala App With Flutter

Product List Digikala This is a Mini-Project For Digikala App With Flutter By Mi

Dively_HP 4 Jan 7, 2023