How to create circular ListView in Flutter - dart

Question

How would I create a circular ListView in Flutter?
I want something that allows me to have a list of widgets rotate around an origin.
Something similar to this:
Any help would be appreciated.

Answer 1

Circular List View Demo. Which Is helpful for You May be.
Main.dart
import 'package:master/numbers_list.dart';
import 'package:master/radial_list.dart';
import 'package:meta/meta.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyHomePage());
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(
accentColor: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
RadialListViewModel radialList;
HomePage({
#required this.radialList
});
#override
HomePageState createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("My Home Page"),
),
body: Stack(
children: <Widget>[
RadialList(
radialList: radialNumbers,
radius: 150.00,
),
],
)
);
}
}
numbers_list.dart
import 'package:master/radial_list.dart';
final RadialListViewModel radialNumbers = new RadialListViewModel(
items: [
new RadialListItemViewModel(
number: 1,
isSelected: true,
),
new RadialListItemViewModel(
number: 2,
isSelected: false,
),
new RadialListItemViewModel(
number: 3,
isSelected: false,
),new RadialListItemViewModel(
number: 4,
isSelected: false,
),
new RadialListItemViewModel(
number: 5,
isSelected: false,
),
new RadialListItemViewModel(
number: 6,
isSelected: false,
),
new RadialListItemViewModel(
number: 7,
isSelected: false,
),
new RadialListItemViewModel(
number: 8,
isSelected: false,
),
new RadialListItemViewModel(
number: 9,
isSelected: false,
),
new RadialListItemViewModel(
number: 10,
isSelected: false,
),
new RadialListItemViewModel(
number: 11,
isSelected: false,
),new RadialListItemViewModel(
number: 12,
isSelected: false,
),
]
);
radial_list.dart
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:master/radial_position.dart';
class RadialList extends StatefulWidget {
final RadialListViewModel radialList;
final double radius;
RadialList({
this.radialList,
this.radius,
});
List<Widget> _radialListItems(){
final double firstItemAngle = pi;
final double lastItemAngle = pi;
final double angleDiff = (firstItemAngle + lastItemAngle) / (radialList.items.length);
double currentAngle = firstItemAngle;
return radialList.items.map((RadialListItemViewModel viewModel){
final listItem = _radialListItem(viewModel,currentAngle);
currentAngle += angleDiff;
return listItem;
}).toList();
}
Widget _radialListItem(RadialListItemViewModel viewModel, double angle){
return Transform(
transform: new Matrix4.translationValues(
180.0,
250.0,
0.0
),
child: RadialPosition(
radius: radius,
angle: angle,
child: new RadialListItem(
listItem: viewModel,
),
),
);
}
#override
RadialListState createState() {
return new RadialListState();
}
}
class RadialListState extends State<RadialList> {
#override
Widget build(BuildContext context) {
return new Stack(
children: widget._radialListItems(),
);
}
}
class RadialListItem extends StatefulWidget {
final RadialListItemViewModel listItem;
RadialListItem({
this.listItem
});
#override
RadialListItemState createState() {
return new RadialListItemState();
}
}
class RadialListItemState extends State<RadialListItem> {
#override
Widget build(BuildContext context) {
return Transform(
transform: new Matrix4.translationValues(-30.0, -30.0, 0.0),
child: Container(
width: 60.0,
height: 60.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepPurpleAccent,
border: new Border.all(
color: Colors.red,
width: 2.0
)
),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: OutlineButton(
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)),
color: Colors.transparent,
onPressed: () {
setState(() {
widget.listItem.isSelected = true;
//widget.listItem.number = widget.listItem.number + 1;
});
},
child: new Text(
widget.listItem.number.toString(),
style: new TextStyle(
color: widget.listItem.isSelected ? Colors.red : Colors.yellow,
fontSize: 20.0
),
),
),
),
),
);
}
}
class RadialListViewModel{
final List<RadialListItemViewModel> items;
RadialListViewModel({
this.items = const [],
});
}
class RadialListItemViewModel{
int number;
bool isSelected;
RadialListItemViewModel({
this.isSelected=false,
this.number,
});
}
radial_position.dart
import 'package:flutter/material.dart';
import 'dart:math';
class RadialPosition extends StatefulWidget {
final double radius;
final double angle;
final Widget child;
RadialPosition({
this.angle,
this.child,
this.radius,
});
#override
RadialPositionState createState() {
return new RadialPositionState();
}
}
class RadialPositionState extends State<RadialPosition> {
#override
Widget build(BuildContext context) {
final x = cos(widget.angle) * widget.radius;
final y = sin(widget.angle) * widget.radius;
return Transform(
transform: new Matrix4.translationValues(x, y, 0.0),
child: widget.child,
);
}
}

Answer 2

A simpler way to do it is to use this package
circular_motion
Here's an example using that package
CircularMotion.builder(
itemCount: 18,
centerWidget: Text('Center'),
builder: (context, index) {
return Text('$index');
}
)