selectable_circle_list 0.0.2

A Flutter widget for displaying the Selectable_circle widget in a list. it is also possible to display subitems of the selectable circle

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:selectable_circle_list/selectable_circle_item.dart';
import 'package:selectable_circle_list/selectable_circle_list.dart';

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

/// example app
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'selectable circles demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

/// home widget of the example app
class MyHomePage extends StatefulWidget {
  /// creates the widget
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final list = _buildItems();
    return Scaffold(
      appBar: AppBar(
        title: Text('selectable circles demo'),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              child: SelectableCircleList(
                children: list,
                description: Text("test"),
                subDescription: Text("subtest"),
                // width: 90.0,
                onTap: _onTapCircle,
              ),
            ),
          ],
        ),
      ),
    );
  }

  List<SelectableCircleItem> _buildItems() {
    return <SelectableCircleItem>[
      SelectableCircleItem(
        Icon(Icons.description),
        "first",
        "first",
        Colors.red,
        subItemList: [
          SelectableCircleSubItem("subfirst", "subfirst"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
        ],
      ),
      SelectableCircleItem(
        Icon(Icons.ac_unit),
        "second",
        "second",
        Colors.orange,
        subItemList: [
          SelectableCircleSubItem("subfirst", "subfirst"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
        ],
      ),
      SelectableCircleItem(
        Icon(Icons.ac_unit),
        "third",
        "third",
        Colors.blue,
        subItemList: [
          SelectableCircleSubItem("subfirst", "subfirst"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
          SelectableCircleSubItem("subsecond", "subsecond"),
        ],
      ),
      SelectableCircleItem(
          Icon(Icons.ac_unit), "may the 4th", "forth", Colors.green),
      SelectableCircleItem(
          Icon(Icons.ac_unit), "fifth", "fifth", Colors.orange),
      SelectableCircleItem(Icon(Icons.ac_unit), "6", "6", Colors.green),
    ];
  }

  _onTapCircle(String value, String subvalue) {
    print("tapped $value $subvalue");
  }
}