Flutter: Základní widgety

Verze z 14. 3. 2025, 07:42 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Přidána vyskakovací bublina ("toast")) ← Porovnání se starší verzí		Aktuální verze z 15. 12. 2025, 12:12 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Přidán SizedBox pro odsazení widgetů od sebe.)
(Nejsou zobrazeny 2 mezilehlé verze od 1 uživatele.)
Řádka 13:		Řádka 13:
	TextField(		TextField(
	controller: _abcController,		controller: _abcController,
		+	readOnly: true, // Pokud chcete pole pouze pro čtení
	decoration: const InputDecoration(		decoration: const InputDecoration(
−	labelText: 'Popis – co zadávat',	+	labelText: 'Nadpis pole – viditelný popisek:',
	),		),
	keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty		keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty
Řádka 21:		Řádka 22:
	; Kontroler textového pole		; Kontroler textového pole
	final TextEditingController _abcController = TextEditingController();		final TextEditingController _abcController = TextEditingController();
		+	* Pro práci s obsahem textového pole slouží <code>TextEditingController</code>.
−	; Zpracování obsahu textového pole
	final double totalPrice = double.parse(parsedValue = _abcController.text.trim());		final double totalPrice = double.parse(parsedValue = _abcController.text.trim());
		+	* Přístup k obsahu textového pole zprostředkovává atribut <code>.text</code>.
	* Obdobně lze <code>int.parse(...)</code>.		* Obdobně lze <code>int.parse(...)</code>.
−	; Další možnosti <code>InputDecoration</code>:	+	_abcController.dispose()
		+	* Při uvolňování paměti by měly být řádně uvolněny i kontrolery metodou <code>dispose()</code>.
		+
		+	; Nastavení vzhledu <code>InputDecoration</code>
	contentPadding: EdgeInsets.all(20.0),		contentPadding: EdgeInsets.all(20.0),
	* Odsazení obsahu		* Odsazení obsahu
Řádka 32:		Řádka 37:
	* Ohraničení textového pole		* Ohraničení textového pole
	hintText: 'Text'		hintText: 'Text'
−	* Nahrazuje <code>labelText</code>, ale po zadání textu do pole zmizí.	+	* Nápověda – co má uživatel zadat do pole.
		+	* Po zadání textu do pole text zmizí.
	== Tlačítka ==		== Tlačítka ==
Řádka 54:		Řádka 60:
	),		),
		+	== Odsazení ==
		+	SizedBox(height: 10),
		+
		+	Příklad použití:
		+	Column(
		+	Text('Hello'),
		+	Sizedbox(height: 10),
		+	Text('World!'),
		+	)
	== Textová popiska ==		== Textová popiska ==

---

Aktuální verze z 15. 12. 2025, 12:12

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

[editovat] Uspořádání stránky

Center( child: ... )

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

[editovat] Textová pole

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

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

hintText: 'Text'

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

[editovat] Tlačítka

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

[editovat] ListView

• Pro zobrazení seznamu seznam můžeme použít ListView:

 Expanded(
   child: ListView.builder(
     itemCount: _seznam.length,
     itemBuilder: (context, index) {
       return ListTile(
           title: Text('${_seznam[index].abc}'),
           subtitle: Text('${_seznam[index].def}'),
       );
     },
   ),
 ),

[editovat] Odsazení

SizedBox(height: 10),

Příklad použití:

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

[editovat] Textová popiska

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

[editovat] 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')
     ),
   );
 });

[editovat] Jednoduchý dialog

Pro zobrazení dialogu si můžeme vytvořit metodu:

 Future<void> displayDialog(String messageText) => showDialog<void>(
   context: context,
   builder: (context) {
     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:

displayDialog('Text');