UI

2. main.dart

1. showModalBottomSheet

define model

                          class CustomIcon {
                            final String name;
                            final String icon;

                            CustomIcon({
                              required this.name,
                              required this.icon,
                            });
                          }

                          

define the list data

                          List<CustomIcon> healthNeeds = [
                            CustomIcon(name: "Diabetes", icon: 'assets/blood.png'),
                            CustomIcon(name: "Health Care", icon: 'assets/health_care.png'),
                            CustomIcon(name: "Dental", icon: 'assets/tooth.png'),
                            CustomIcon(name: "Insured", icon: 'assets/insurance.png'),
                            
                          ];
                        

on button click

                          InkWell(
                    onTap: () {
                      showModalBottomSheet(
                        context: context,
                        builder: (context){
                            return Container(
                              width: double.infinity,
                                padding:EdgeInsets.all(20),
                                child: Column(
                                  children: [
                                    Text(
                                      "Health Needs"
                                    ),

                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: List.generate(
                                        healthNeeds.length,
                                            (index) {
                                          return Column(
                                            children: [
                                              InkWell(
                                                onTap: () {},
                                                borderRadius: BorderRadius.circular(90),
                                                child: Container(
                                                  width: 60,
                                                  height: 60,
                                                  padding: const EdgeInsets.all(15),
                                                  decoration: BoxDecoration(
                                                    color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.4),
                                                    shape: BoxShape.circle,
                                                  ),
                                                  child: Image.asset(
                                                    healthNeeds[index].icon,
                                                  ),
                                                ),
                                              ),
                                              const SizedBox(height: 6),
                                              Text(healthNeeds[index].name)
                                            ],
                                          );
                                        },
                                      ),
                                    ),


                                  ],
                                ),
                            );
                        }
                      );
                    },
                    child: Container(
                      padding: const EdgeInsets.all(12.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        color: Colors.red,
                      ),
                      child: const Text(
                        'InkWell 2',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                  ),

                

Complete code

                import 'dart:ffi';

import 'package:flutter/material.dart';


class HomePage extends StatelessWidget {

  HomePage({super.key});

  List<CustomIcon> healthNeeds = [
    CustomIcon(name: "Diabetes", icon: 'assets/blood.png'),
    CustomIcon(name: "Health Care", icon: 'assets/health_care.png'),
    CustomIcon(name: "Dental", icon: 'assets/tooth.png'),
    CustomIcon(name: "Insured", icon: 'assets/insurance.png'),
    
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: [

              Column(
                children: [

                  CircleAvatar(
                    radius: 50,
                    backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
                    ),
                  ),

                  SizedBox(height: 20,),
                  Text(
                    "manoj vijayan",
                    style: TextStyle(
                      fontSize: 25
                    ),
                  ),

                  Text(
                    "Developer",
                    style: TextStyle(
                        fontSize: 18
                    ),
                  ),

                  InkWell(
                    onTap: () {
                      showModalBottomSheet(
                        context: context,
                        builder: (context){
                            return Container(
                              width: double.infinity,
                                padding:EdgeInsets.all(20),
                                child: Column(
                                  children: [
                                    Text(
                                      "Health Needs"
                                    ),

                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: List.generate(
                                        healthNeeds.length,
                                            (index) {
                                          return Column(
                                            children: [
                                              InkWell(
                                                onTap: () {},
                                                borderRadius: BorderRadius.circular(90),
                                                child: Container(
                                                  width: 60,
                                                  height: 60,
                                                  padding: const EdgeInsets.all(15),
                                                  decoration: BoxDecoration(
                                                    color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.4),
                                                    shape: BoxShape.circle,
                                                  ),
                                                  child: Image.asset(
                                                    healthNeeds[index].icon,
                                                  ),
                                                ),
                                              ),
                                              const SizedBox(height: 6),
                                              Text(healthNeeds[index].name)
                                            ],
                                          );
                                        },
                                      ),
                                    ),


                                  ],
                                ),
                            );
                        }
                      );
                    },
                    child: Container(
                      padding: const EdgeInsets.all(12.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        color: Colors.red,
                      ),
                      child: const Text(
                        'InkWell 2',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                        ),
                      ),
                    ),
                  ),

                  Row(
                    children: [
                      Text("Complete your profile 1/15")
                    ],
                  ),

                  Row(
                    children: List.generate(5, (index) {

                        return Expanded(
                          child: Container(
                            height: 7,
                            margin: EdgeInsets.only(right : index==4 ? 0 : 6),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: index == 0 ? Colors.blue : Colors.black26
                            ),
                            child: Text(index.toString()),

                          ),
                        );
                      }
                    ),
                  ),

                  SizedBox(
                    height: 160,
                      child: ListView.separated(
                        itemCount: 3,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index){
                            return SizedBox(
                              width: 160,
                              child: Card(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Column(
                                    children: [

                                    ],
                                  ),
                                ),
                              ),
                            );
                        },
                        separatorBuilder: (context, index) => Padding(padding: EdgeInsets.all(5)),
                      ),
                  ),

                  ...List.generate(5, (index) {
                      return Card(
                        child: ListTile(
                          title: Text("test1"),
                        ),
                      );
                    }
                  )

                ],
              )


            ],
          ),
        )

    );
  }
}

class CustomIcon {
  final String name;
  final String icon;

  CustomIcon({
    required this.name,
    required this.icon,
  });
}