A Gomb (Button) widget az egyik legelterjedtebb felhasználói felület elem. A Flutter három különböző gombot támogat.
ElevatedButton
Létezik az ElevatedButton, aminek van egy háttérszíne és egy kis árnyéka.
ElevatedButton(onPressed: onPressed, child: child)OutlinedButton
Aztán van az OutlinedButton, ami egy háttér nélkül, valamilyen kerettel.
OutlinedButton(onPressed: onPressed, child: child)TextButton
És van a TextButton, ami egy kattintható szöveg.
TextButton(onPressed: onPressed, child: child)Argumentumok
Legyen szó bármelyik gombról a fentiek közül, két-két nevesített argumentummal rendelkeznek: onPressed és child
A child az egyszerűbb, ami egy szimpla widgetet vár. TextButton esetén ez tipikusan egy Text widget, ami a szöveget tartalmazza.
Az onPressed pedig egy függvényt vár. Egy olyan függvényt, aminek akkor kell végrehajtódnia, amikor a gombot megnyomjuk. A függvényt vagy megírjuk az onPressed tulajdonság után, tehát egy callback-et készítünk (névtelen függvény). Ha ilyen függvényt készítünk, akkor ez máshol nem hívató meg, hiszen nincs neve. Ez a függvény a widgeten belül automatikusan meghívódik, amikor a widget észleli a klikk eseményt.
Vagy a másik opció, hogy valahol elkészítjük már előtte a függvényt, és itt csak a nevét adjuk át (zárójelek nélkül, mert az azt jelentené, hogy a függvényt azonnal meg is hívjuk).
Gomb stílus
A TextButton esetében (is) van egy style nevű tulajdonság. Ennek meg kell adnunk egy TextButton objektumot, aminek a styleFrom() metódusán keresztül számos argumentummal írható felül az szöveggomb alapértelmezett kinézete.
Az alábbi kóddal például a szöveggombon a szöveg színe fehér lesz, a mérete pedig 28 pixel:
style: TextButton.styleFrom(
foregroundColor: Colors.white,
textStyle: const TextStyle(fontSize: 28),
),
Eltartás (padding): a padding tulajdonsággal lehetséges.
style: TextButton.styleFrom(
padding: EdgeInsets.all(érték),A padding értékét az EdgeInsets.all() metódussal is be tudjuk állítani, amely esetben az eltartás minden irányból ugyanakkora lesz (top = bottom = left = right). Az EdgeInsets.only() metódussal pedig meg tudjuk adni egyesével az eltartásokat minden irányból. Itt például csak a felső eltartást állítjuk be:
style: TextButton.styleFrom(
padding: const EdgeInsets.only(
top: 20,
),
Van egy másik alternatíva is arra, hogy ha két widget közé távolságot akarunk beállítani. Ez pedig a SizedBox widget alkalmazása, amit ebben a posztban mutattam be.
Igazából mindegy melyiket használjuk padding-olásra.