celestial-gorge-0423

readme.md

celestial-gorge-0423

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          // color: Colors.deepPurple,
            height: MediaQuery.of(context).size.height,
            margin: const EdgeInsets.only(top: 30),
            child:  const Column(

              children: [
                TopWidget(),
                BodyWidget()
              ],
            )
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

// Phần Top Widget
class TopWidget extends StatefulWidget {
  const TopWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return TopWidgetState();
  }
}

class TopWidgetState extends State<TopWidget> {
  String taomoi = "Tạo mới";
  String sapxeptuatoz = "Sắp xếp từ A đến Z";
  String sapxeptuztoa = "Sắp xếp từ Z đến A";

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 8,
          child: SizedBox(
            width: 300,
            child: TextField(
              cursorColor: Colors.purple,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.1),
                // Chiều cao của Text hint
                hintStyle: const TextStyle(height: 1,color: Colors.blueAccent),
                hintText: "Tìm kiếm", // Placeholder
                prefixIcon: const Icon(
                  Icons.search,
                  size: 20,
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
        ),
        Expanded(
            flex: 1,
            child: PopupMenuButton(
              itemBuilder: (BuildContext context) {
                return [
                  PopupMenuItem(
                    textStyle: const TextStyle(color: Colors.blueAccent),
                    value: taomoi,
                    child: Text(taomoi),
                  ),
                  PopupMenuItem(
                    textStyle: const TextStyle(color: Colors.blueAccent),
                    value: sapxeptuatoz,
                    child: Text(sapxeptuatoz),
                  ),
                  PopupMenuItem(
                    textStyle: const TextStyle(color: Colors.blueAccent),
                    value: sapxeptuztoa,
                    child: Text(sapxeptuztoa),
                  ),
                ];
              },
              onSelected: (selected) {
                print(selected);
              },
              // khoảng cách giữa PopupMenuButton và PopupMenuItem
              offset: const Offset(0, 50),
            ))
      ],
    );
  }
}

// Phần Body Widget
class BodyWidget extends StatefulWidget {
  const BodyWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return BodyWidgetState();
  }
}

class BodyWidgetState extends State<BodyWidget> {
  List<Widget> generateListTiles() {
    List<Widget> listTiles = [];
    for (int i = 1; i < 100; i++) {
      listTiles.add(
        ListTile(
          // Màu nền list tile
              // tileColor: Colors.indigoAccent,
              onTap: (){},
              shape: RoundedRectangleBorder(
                side: const BorderSide(color: Colors.blueAccent, width: 1),
                borderRadius: BorderRadius.circular(5),
              ),
              title: Text("test $i"),
              textColor: Colors.blueAccent,
              trailing: SizedBox(
                width: 23,
                child: PopupMenuButton(
                  itemBuilder: (BuildContext context) {
                    return <PopupMenuEntry>[
                      const PopupMenuItem(
                        textStyle: TextStyle(color: Colors.blueAccent),
                        value: "test",
                        child: Text("test menu item"),
                      )
                    ];
                  },
                  offset: const Offset(0, 50),
                ),
              ),
        ),
      );
      listTiles.add(
          const SizedBox(
            height: 5,
          )
      );
    }
    return listTiles;
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 30),
      child: SizedBox(
        height: MediaQuery.of(context).size.height - 150,
        child: ListView(
          children: generateListTiles(),
        ),
      ),
    );
  }
}