1-) FLUTTER - button türleri vs

GENELDE ElevatedButton.icon kullan. ama beyaz renkte olsun dersen OutlinedButton.icon kullanabilirsin

ElevatedButton.icon(
  onPressed: () {},
  label: const Text("Elavated Button with icon"),
  icon: Icon(Icons.add),
)

primary -> arka plan rengi

onPrimary -> yazı rengi

OutlinedButton.icon(
  onPressed: () {},
  label: const Text("Outline Button with icon"),
  icon: Icon(Icons.add),
  style: OutlinedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(13))),
),

veya

OutlinedButton.icon(
  onPressed: () {},
  label: const Text("Outline Button with icon"),
  icon: Icon(Icons.add),
  style: OutlinedButton.styleFrom(
      shape: StadiumBorder(),
      side: BorderSide(color: Colors.purple, width: 2)),
),

return Container(child: Column(children: [
  TextButton(onPressed: (){}, child: Text("TextButton")),
  TextButton.icon(onPressed: (){}, label: const Text("IconButton"),icon: Icon(Icons.add),),
  ElevatedButton(onPressed: (){}, child: Text("Elavated Button")),
  ElevatedButton.icon(onPressed: (){}, label: const Text("Elavated Button with icon"),icon: Icon(Icons.add),),
  OutlinedButton(onPressed: (){}, child: Text("Outline Button")),
  OutlinedButton.icon(onPressed: (){}, label: const Text("Elavated Button with icon"),icon: Icon(Icons.add),),

],),);

TÜM UYGULAMADAKİ OUTLİNEBUTTONLARIN RENGİ BU OLSUN DERSEN MATERİALAPP A AŞAĞIDAKİ GİBİ EKLEYEBİLİRSİN

return MaterialApp(

  theme: ThemeData(primarySwatch: Colors.purple,

outlinedButtonTheme: OutlinedButtonThemeData(style: OutlinedButton.styleFrom(backgroundColor: Colors.black))),

LOGİN BUTTON

DİNAMİK DropdownButton KULLANIMI

class _dropdownpageState extends State<dropdownpage> {
  String? secili = null;

  List<String> sehirler = ["Antalya", "Ankara", "İzmir"];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton<String>(
        icon: Icon(Icons.arrow_downward),
        hint: Text("Şehir seçiniz"),
        items: sehirler.map((String oAnkiVeri) =>DropdownMenuItem(child: Text(oAnkiVeri), value: oAnkiVeri),).toList(),
        value: secili,
        onChanged: (String? value) {
          setState(() {
            secili = value!;
          });
        },
      ),
    );
  }
}

SABİT DropdownButton KULLANIMI

class _dropdownpageState extends State<dropdownpage> {
  String? secili = null;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton<String>(

     icon: Icon(Icons.arrow_downward),

        hint: Text("Şehir seçiniz"),
        items: [
          DropdownMenuItem(
            child: Text("Antalya"),
            value: "Antalya",
          ),
          DropdownMenuItem(
            child: Text("ankara"),
            value: "ankara",
          ),
        ],
        value: secili,
        onChanged: (String? value) {
          setState(() {
            secili = value!;
          });
        },
      ),
    );
  }
}

DİNAMİK PopupMenuButtonKULLANIMI : bunu appBar'a action olarak verebilirsin

class _popupmenupageState extends State<popupmenupage> {
  String secilenRenk = "";
  List<String> renkler = ["Mavi", "Yeşil", "Sarı"];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Container(
        child: PopupMenuButton<String>(
          onSelected: (String secilen) {
            print(secilen);
            secilenRenk = secilen;
          },
          itemBuilder: (BuildContext context) {
            return renkler
                .map((e) => PopupMenuItem(
                      child: Text(e),
                      value: e,
                    ))
                .toList();
          },
        ),
      )),
    );
  }
}

SABİT PopupMenuButtonKULLANIMI : bunu appBar'a action olarak verebilirsin

class _popupmenupageState extends State<popupmenupage> {
  String secilenSehir = "";

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Container(
        child: PopupMenuButton<String>(
          onSelected: (String secilen) {
            print(secilen);
            secilenSehir = secilen;
          },
          itemBuilder: (BuildContext context) {
            return <PopupMenuEntry<String>>[
              PopupMenuItem(
                child: Text("Ankara"),
                value: "Ankara",
              ),
              PopupMenuItem(
                child: Text("Antalya"),
                value: "Antalya",
              ),
              PopupMenuItem(
                child: Text("İstanbul"),
                value: "İstanbul",
              ),
            ];
          },
        ),
      )),
    );
  }
}

CARD KULLANIMI

child: Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  elevation: 12,
  child: Text(
    "Rambo",
    style: TextStyle(fontSize: 30),
  ),
),

elevation nedir   ? gölgelik verir biraz daha hoş durur

shape nedir  ? kenarları oval yapar yuvarlar

child: Card(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  elevation: 12,
  child: ListTile(
    leading: Icon(Icons.add),
    title: Text("Başlık"),
    subtitle: Text("Alt başlık içerik"),
    trailing: Icon(Icons.real_estate_agent),
  ),
),

leading nedir ? sol taraftaki icon

trailing nedir ? sağ taraftaki icon

iki widget arasına çizgi atmak için Divider kullanabilirsin

Divider(color: Colors.red,thickness: 1,height: 10,indent: 20,endIndent: 20,),

thickness -> kalınlık , height -> yukarıdan margin , indent -> soldan boşuk , endIndent -> sağdan boşluk

SingleChildScrollView KULLANIMI

SingleChildScrollView nedir ? -> scroll özelliğini çıkarır ve taşma olmaz

child: SingleChildScrollView(
  child: Column(
    children: [tekListeColumn(), tekListeColumn(), tekListeColumn(), tekListeColumn(), tekListeColumn(), tekListeColumn(), tekListeColumn()],
  ),
),

Column tekListeColumn() {
  return Column(
    children: [
      Container(
        child: Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 12,
          child: const ListTile(
            leading: Icon(Icons.add),
            title: Text("Başlık"),
            subtitle: Text("Alt başlık içerik"),
            trailing: Icon(Icons.real_estate_agent),
          ),
        ),
      ),
      Divider(
        color: Colors.red,
        thickness: 1,
        height: 10,
        indent: 20,
        endIndent: 20,
      ),
    ],
  );
}