mellow-waterfall-1785

readme.md

mellow-waterfall-1785

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});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          // color: Colors.cyanAccent,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            margin: const EdgeInsets.only(top: 30),
            child:  const Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  flex: 1,
                    child: TopWidget()
                ),
                Expanded(
                  flex: 10,
                    child: BodyWidget()
                )
              ],
            )
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class TopWidget extends StatefulWidget {
  const TopWidget({super.key});

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

class TopWidgetState extends State<TopWidget> {
  String create = "create";
  String sortatoz = "Sort A-Z";
  String sortztoa = "Sort Z-A";

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 8,
          child: SizedBox(
            width: 300,
            child: TextField(
              cursorColor: Colors.blueAccent,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.1),
                hintStyle: const TextStyle(height: 1,color: Colors.blueAccent),
                hintText: "Find", // 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: create,
                    child: Text(create),
                  ),
                  PopupMenuItem(
                    textStyle: const TextStyle(color: Colors.blueAccent),
                    value: sortatoz,
                    child: Text(sortatoz),
                  ),
                  PopupMenuItem(
                    textStyle: const TextStyle(color: Colors.blueAccent),
                    value: sortztoa,
                    child: Text(sortztoa),
                  ),
                ];
              },
              onSelected: (selected) {
                print(selected);
              },
              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 < 1000; i++) {
      listTiles.add(
        ListTile(
              // 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 ListView(
      children: generateListTiles(),
    );
  }
}