Simple selectable button demo

selectable_button_method_1.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  int selectedIndex = -1;
  List<String> fields = ['NIN', 'PVC', 'BVN'];
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView.builder(
          itemCount: fields.length,
          itemBuilder: (context, index){
            return SelectableCard(
              active: index == selectedIndex,
              title: fields[index],
              onTap: (){
                setState((){
                  selectedIndex = index;
                });
              }
            );
          }
          ),
      ),
    );
  }
}


class SelectableCard extends StatelessWidget{
  final bool active;
  final String title;
  final VoidCallback onTap;

  const SelectableCard({super.key, required this.active, required this.title, required this.onTap});
  @override
  Widget build (BuildContext context){
    return InkWell(
      onTap: onTap,
      child: Container(
      height: 70,
        color: active?Colors.green: Colors.grey,
        child: Text(title),
      ),
    );
  }
}