Flutter: Základní widgety

Verze z 26. 1. 2026, 17:31 (zobrazit zdroj) Spravce (diskuse | příspěvky) (→Tlačítka: Rozepsány podrobněji vlastnosti.) ← Porovnání se starší verzí		Aktuální verze z 16. 2. 2026, 09:55 (zobrazit zdroj) Spravce (diskuse | příspěvky) (→Jednoduchý dialog: Lépe struktorováno, přidány příklady dialogů, připraveno na budoucí osamostatnění.)
(Není zobrazena 1 mezilehlá verze od 1 uživatele.)
Řádka 24:		Řádka 24:
	TextField(		TextField(
	controller: _abcController,		controller: _abcController,
−	readOnly: true, // Pokud chcete pole pouze pro čtení
	decoration: const InputDecoration(		decoration: const InputDecoration(
	labelText: 'Nadpis pole – viditelný popisek:',		labelText: 'Nadpis pole – viditelný popisek:',
Řádka 30:		Řádka 29:
	keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty		keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty
	),		),
		+
		+	; Parametry widgetu
		+
		+	enabled:
		+	* Aktivní/zakázané textové pole.
		+	* Zakázané textové pole je šedivé a nejde do něj umístit kurzor.
		+
		+	readOnly:
		+	* Textové pole pouze pro čtení – ale není šedivé a lze do něj umístit kurzor
		+
		+	onChanged: (text) { ... }
		+	* Metoda, která se zavolá při změně obsahu tlačítka.
		+	* Metoda musí přijímat jako parametr text.
		+
	; Kontroler textového pole		; Kontroler textového pole
Řádka 43:		Řádka 56:
	; Nastavení vzhledu <code>InputDecoration</code>		; Nastavení vzhledu <code>InputDecoration</code>
		+
	contentPadding: EdgeInsets.all(20.0),		contentPadding: EdgeInsets.all(20.0),
	* Odsazení obsahu		* Odsazení obsahu
		+
	border: OutlineInputBorder(),		border: OutlineInputBorder(),
	* Ohraničení textového pole		* Ohraničení textového pole
		+
		+	labelText: 'text'
		+	* Popiska textového pole.
		+	* Když je pole prázdné, text je v poli.
		+	* Jakmile uživatel pole vyplní, popiska se přesune do rámečku textového pole.
		+
	hintText: 'Text'		hintText: 'Text'
	* Nápověda – co má uživatel zadat do pole.		* Nápověda – co má uživatel zadat do pole.
Řádka 98:		Řádka 119:
	== Jednoduchý dialog ==		== Jednoduchý dialog ==
−	Pro zobrazení dialogu si můžeme vytvořit metodu:	+
−	Future<void> displayDialog(String messageText) => showDialog<void>(	+	Pro vytvoření jednoduchého dialogu slouží třída <code>AlertDialog</code>.
		+	; Parametry konstruktoru <code>AlertDialog</code>
		+	title: const Text('Titulek dialogu')
		+	content: const Text('Zpráva dialogu...')
		+	actions: [ ''seznam akcí/tlačítek'' ]
		+
		+	; Příklad – Jednoduchý dialog s jedním tlačítkem
		+	AlertDialog(
		+	title: const Text('Skutečně smazat položku'),
		+	content: const Text('Soubor neobsahuje platná data!'),
		+	actions: [
		+	TextButton(
		+	onPressed: () => Navigator.pop(context),
		+	child: const Text('OK'),
		+	),
		+	]
		+	)
		+
		+	; Příklad – Potvrzovací dialog se dvěma tlačítky
		+	AlertDialog(
		+	title: const Text('Upozornění'),
		+	content: const Text('Skutečně chcete smazat položku XYZ?'),
		+	actions: [
		+	'''TextButton('''
		+	onPressed: () => {
		+	setState(() { ''_akceSmazSkutecne();'' };);
		+	_akceUloz();
		+	Navigator.pop(context);
		+	},
		+	child: const '''Text('Smaž'),'''
		+	'''),'''
		+	'''TextButton('''
		+	onPressed: () => Navigator.pop(context),
		+	child: const '''Text('Zrušit'),'''
		+	'''),'''
		+	]
		+	)
		+
		+	=== Vyvolání dialogu ===
		+
		+	; Metoda pro různá hlášení
		+
		+	Můžeme připravit metodu pro vyvolání obecného dialogu:
		+	Future<void> ukazHlaseni(String messageText) => showDialog<void>(
	context: context,		context: context,
	builder: (context) {		builder: (context) {
−	return AlertDialog(	+	return AlertDialog( ''...'' );
−	title: const Text('Chybně zadaná data:'),	+
−	content: Text(messageText),	+
−	actions: <Widget>[	+
−	TextButton(	+
−	onPressed: () {	+
−	Navigator.of(context).pop();	+
−	},	+
−	child: const Text('OK'),	+
−	),	+
−	],	+
−	);	+
	},		},
	);		);
	Metodu následně voláme:		Metodu následně voláme:
−	displayDialog('Text');	+	ukazHlaseni('Text');
		+
		+	; Volání přímo v kódu
		+
		+	Můžeme také dialog vytvořit a rovnou ho zavolat:
		+	showDialog(
		+	context: context,
		+	builder: (context) => AlertDialog( ''...'' ),
		+	)

---

Aktuální verze z 16. 2. 2026, 09:55

Obsah 1 Uspořádání stránky 2 Textová pole 3 Tlačítka 4 ListView 5 Odsazení 6 Textová popiska 7 Vyskakovací bublina (Toast) 8 Jednoduchý dialog 8.1 Vyvolání dialogu

Uspořádání stránky

Center( child: ... )

• Vycentruje obsah uvnitř widgetu.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[ ... ]
)

• Vloží blok více prvků poskládaných pod sebe.

Padding(
  padding: EdgeInsetsGeometry.all(20),
  child: ...
)

• Všechny prvky budou odsazeny navzájem o 20 pixelů.

Expanded( child: ... )

• Tato část okna se bude roztahovat při zvětšování okna.

Textová pole

TextField(
  controller: _abcController,
  decoration: const InputDecoration(
    labelText: 'Nadpis pole – viditelný popisek:',
  ),
  keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty
),

Parametry widgetu

enabled:  

• Aktivní/zakázané textové pole.
• Zakázané textové pole je šedivé a nejde do něj umístit kurzor.

readOnly:  

• Textové pole pouze pro čtení – ale není šedivé a lze do něj umístit kurzor

onChanged: (text) { ... }

•  Metoda, která se zavolá při změně obsahu tlačítka.
• Metoda musí přijímat jako parametr text.

Kontroler textového pole

final TextEditingController _abcController = TextEditingController();

• Pro práci s obsahem textového pole slouží TextEditingController.

final double totalPrice = double.parse(parsedValue = _abcController.text.trim());

• Přístup k obsahu textového pole zprostředkovává atribut .text.
• Obdobně lze int.parse(...).

_abcController.dispose()

• Při uvolňování paměti by měly být řádně uvolněny i kontrolery metodou dispose().

Nastavení vzhledu InputDecoration

contentPadding: EdgeInsets.all(20.0),

• Odsazení obsahu

border: OutlineInputBorder(),

• Ohraničení textového pole

labelText: 'text'

• Popiska textového pole.
• Když je pole prázdné, text je v poli.
• Jakmile uživatel pole vyplní, popiska se přesune do rámečku textového pole.

hintText: 'Text'

• Nápověda – co má uživatel zadat do pole.
• Po zadání textu do pole text zmizí.

Tlačítka

 ElevatedButton(
   onPressed: _nazevMetodyReakce,
   child: const Text('Popis tlačítka'),
 ),

Vlastnosti

onPressed:   

• Název metody, která se vyvolá při stisknutí tlačítka.
• Obecně může být vložena akce i přímo

child:  

• Obsah tlačítka – popis, ikona, obrázek, ...

ListView

• Pro zobrazení dynamického seznamu prvků.
• Více viz samostatná stránka Flutter: ListView.

Odsazení

SizedBox(height: 10),

Příklad použití:

Column(
  const Text('Hello'),
  const Sizedbox(height: 10),
  const Text('World!'),
)

Textová popiska

const Text('Záznamy o tankování:',),

Vyskakovací bublina (Toast)

• V mobilních aplikacích se pro stručná oznámení používá spíše vyskakovací bublina, než vyskakovací okno.

 setState(() {
   ScaffoldMessenger.of(context).showSnackBar(
     SnackBar(
         content: Text('Informace pro uživatele')
     ),
   );
 });

Jednoduchý dialog

Pro vytvoření jednoduchého dialogu slouží třída AlertDialog.

Parametry konstruktoru AlertDialog

title: const Text('Titulek dialogu')
content: const Text('Zpráva dialogu...')
actions: [ seznam akcí/tlačítek ]

Příklad – Jednoduchý dialog s jedním tlačítkem

AlertDialog(
  title: const Text('Skutečně smazat položku'),
  content: const Text('Soubor neobsahuje platná data!'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('OK'),
    ),
  ]
)

Příklad – Potvrzovací dialog se dvěma tlačítky

AlertDialog(
  title: const Text('Upozornění'),
  content: const Text('Skutečně chcete smazat položku XYZ?'),
  actions: [
    TextButton(
      onPressed: () => {
        setState(() { _akceSmazSkutecne(); };);
        _akceUloz();
        Navigator.pop(context);
      },
      child: const Text('Smaž'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('Zrušit'),
    ),
  ]
)

Vyvolání dialogu

Metoda pro různá hlášení

Můžeme připravit metodu pro vyvolání obecného dialogu:

 Future<void> ukazHlaseni(String messageText) => showDialog<void>(
   context: context,
   builder: (context) {
     return AlertDialog( ... );
   },
 );

Metodu následně voláme:

ukazHlaseni('Text');

Volání přímo v kódu

Můžeme také dialog vytvořit a rovnou ho zavolat:

showDialog(
  context: context,
  builder: (context) => AlertDialog( ... ),
)