Tutorial Membuat Spinner Multi Select Menggunakan flutter

Selamat malam teman teman,pada kesempatan kali ini saya ingin membagi tutorial bagaimana cara membuat spinner multi select menggunakan flutter dengan memanfaatkan package multi_select_flutter. Pada tutorial kali ini saya menggunakan versi ^4.0.0 .

Adapun hasil akhir tampilan dari tutorial kali ini adalah seperti berikut:

Disini saya mengasumsikan teman teman sudah bisa membuat project baru flutter, Di tutorial ini saya menggunakan IDE Android Studio, bagi teman teman yang menggunakan IDE Visual Studio Code tidak masalah karena itu tergantung dari kenyamanan teman teman dalam menulis code....

OK,Untuk menggunakan package multi_select_flutter kita harus menambahkan pada file  pubspec.yaml seperti contoh dibawah:

Jangan lupa setelah menambahkan dependencies ke pubspec.yaml agar melakukan perintah flutter pub get  pada terminal yang bertujuan memerintahkan flutter untuk menambahkan dependencies ke folder dependencies yang telah flutter sediakan.

Atau bisa dengan cara klik "Pub get" pada sudut kanan  atas di file pubspec.yaml.

Selanjutnya kita perlu ubah isi dari file main.dart  menjadi seperti berikut:

import 'package:flutter/material.dart';
import 'package:multi_select_flutter/bottom_sheet/multi_select_bottom_sheet_field.dart';
import 'package:multi_select_flutter/chip_display/multi_select_chip_display.dart';
import 'package:multi_select_flutter/util/multi_select_item.dart';

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  static List<SpinnerMulti> _angka = [
    SpinnerMulti(id: 1, name: "Satu"),
    SpinnerMulti(id: 2, name: "Dua"),
    SpinnerMulti(id: 3, name: "Tiga"),
    SpinnerMulti(id: 4, name: "Empat"),
    SpinnerMulti(id: 5, name: "Lima"),
  ];
  final _itemsAngka = _angka
      .map((angka) => MultiSelectItem<SpinnerMulti>(angka, angka.name))
      .toList();
  List<SpinnerMulti?> _selectedAngka = [];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Color.fromRGBO(33, 33, 33, 0.5),
                        width: 1,
                      ),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: MultiSelectBottomSheetField<SpinnerMulti?>(
                      initialChildSize: 0.7,
                      decoration: BoxDecoration(color: Colors.transparent),
                      maxChildSize: 0.95,
                      title: Text("Angka"),
                      buttonText: Text(
                        "Angka",
                        style:
                            TextStyle(color: Color.fromRGBO(33, 33, 33, 0.7)),
                      ),
                      items: _itemsAngka,
                      searchable: true,
                      searchHint: "Cari",
                      buttonIcon: Icon(
                        Icons.add_circle_outline,
                        color: Color.fromRGBO(33, 33, 33, 0.5),
                      ),
                      cancelText: Text("Tutup"),
                      onConfirm: (values) {
                        setState(() {
                          _selectedAngka = values;
                        });
                      },
                      chipDisplay: MultiSelectChipDisplay(
                        decoration: BoxDecoration(
                          border: Border(
                            top: BorderSide(
                                width: 1.0,
                                color: Color.fromRGBO(33, 33, 33, 0.5)),
                          ),
                        ),
                        onTap: (item) {},
                      ),
                    ) // This trailing comma makes auto-formatting nicer for build methods.
                    ),
              ],
            ),
          ),
        ));
  }
}

class SpinnerMulti {
  final int id;
  final String name;

  SpinnerMulti({required this.id, required this.name});
}

Setelah semua langkah sudah kita lakukan,silahkan running project nya...

Sekian tutorial kali ini, Jangan sungkan untuk bertanya di kolom komentar di bawah jika mendapat  error....