GetX GetBuilder ListView

 import "package:flutter/material.dart";

import "package:get/get.dart";
import "package:getx_flutter/GetX_count_controller.dart";

void main() {
  runApp(const MyApp(),);
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: "GetX GetBuilder ListView",
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: BuildList(),
    );
  }
}
class BuildList extends StatelessWidget {
  BuildList({super.key});

  HomeController homeMade = Get.put(HomeController(),);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GetX GetBuilder ListView"),
        centerTitle: true,
        toolbarHeight: 250.0,
        primary: false,
        leading: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.home,),
        ),
        actions: [
          IconButton(
            onPressed: () {
              /// Navigate to the Search Screen
              Get.to(() { return SecondPage(); });
            },
            icon: const Icon(Icons.search,),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.settings,),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.favorite,),
          ),
          PopupMenuButton(
            itemBuilder: (context) {
              return [
                const PopupMenuItem(
                  value: "about",
                  child: Text("About"),
                ),
                const PopupMenuItem(
                  value: "settings",
                  child: Row(
                    children: [
                      Icon(Icons.settings, color: Colors.black,),
                      SizedBox(width: 7.0,),
                      Text("Settings"),
                    ],
                  ),
                ),
                const PopupMenuItem(
                  value: "Logout",
                  child: Row(
                    children: [
                      Icon(Icons.logout, color: Colors.black,),
                      SizedBox(width: 7.0,),
                      Text("Logout"),
                    ],
                  ),
                ),
              ];
            },
            onSelected: (value) {
              /// Handle menu item selection
              print(value);
            },
          ),
        ],
        // bottom: PreferredSize(
        //   preferredSize: const Size.fromHeight(20.0,),
        //   child: Container(
        //     width: Get.width,
        //     color: Colors.blue,
        //     child: const Text("Some Text", style: TextStyle(color: Colors.white,),),
        //   ),
        // ),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.elliptical(300.0, 100.0,),
          ),
        ),
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetBuilder<HomeController>(
              builder: (controller) {
                return Expanded(
                  child: Card(
                    color: Colors.white38,
                    child: Container(
                      margin: const EdgeInsets.all(20.0,),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black, width: 5.0,),
                      ),
                      child: ListView.separated(
                        separatorBuilder: (context, index) {
                          return const Divider(color: Colors.black, thickness: 1.0,);
                        },
                        shrinkWrap: true,
                        itemCount: homeMade.homeList.length,
                        itemBuilder: (context, index) {
                          return ListTile(
                            title: Text("${homeMade.homeList[index]}"),
                            subtitle: Text("${homeMade.homeList[index]}"),
                            titleTextStyle: const TextStyle(color: Colors.brown, fontFamily: "FontsFour", fontSize: 20.0,),
                            subtitleTextStyle: const TextStyle(color: Colors.black, fontFamily: "FontsSeven", fontSize: 20.0,),
                            splashColor: Colors.black,
                          );
                        },
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}
///Notes:
//Usually, a ListView, as well as GridView, PageView, and CustomScrollView try to fill
// all the available space given by the parent element, even when the list items would require less space.
// With shrinkWrap: true, you can change this behavior so that the ListView only occupies the space it needs.

///  Search Page
class SecondPage extends StatelessWidget {
  SecondPage({super.key});

  TextEditingController search = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        return FocusManager.instance.primaryFocus!.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          /// The search area here
          title: Container(
            width: double.infinity,
            height: 40.0,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5.0,),
            ),
            child: Center(
              child: TextFormField(
                controller: search,
                decoration: InputDecoration(
                  hintText: "Search...",
                  prefixIcon: IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.search,),
                  ),
                  suffixIcon: IconButton(
                    onPressed: () {
                      /// Clear the search Field
                      search.clear();
                      },
                    icon: const Icon(Icons.clear,),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}