Flutter: Základní widgety

Verze z 21. 2. 2025, 06:28 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Textová položka) ← Porovnání se starší verzí		Aktuální verze z 14. 3. 2025, 07:42 (zobrazit zdroj) Spravce (diskuse | příspěvky) (Přidána vyskakovací bublina ("toast"))
(Nejsou zobrazeny 3 mezilehlé verze od 1 uživatele.)
Řádka 26:		Řádka 26:
	* Obdobně lze <code>int.parse(...)</code>.		* Obdobně lze <code>int.parse(...)</code>.
		+	; Další možnosti <code>InputDecoration</code>:
		+	contentPadding: EdgeInsets.all(20.0),
		+	* Odsazení obsahu
		+	border: OutlineInputBorder(),
		+	* Ohraničení textového pole
		+	hintText: 'Text'
		+	* Nahrazuje <code>labelText</code>, ale po zadání textu do pole zmizí.
	== Tlačítka ==		== Tlačítka ==
Řádka 46:		Řádka 53:
	),		),
	),		),
		+
	== Textová popiska ==		== Textová popiska ==
	const Text('Záznamy o tankování:',),		const Text('Záznamy o tankování:',),
		+
		+
		+	== Vyskakovací bublina (Toast) ==
		+
		+	* V&nbsp;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 ==		== Jednoduchý dialog ==
−	showDialog(	+	Pro zobrazení dialogu si můžeme vytvořit metodu:
−	context: context,	+	Future<void> displayDialog(String messageText) => showDialog<void>(
−	builder: (context) {	+	context: context,
−	return AlertDialog(	+	builder: (context) {
−	title: const Text('Nadpis dialogu'),	+	return AlertDialog(
−	content: Text('Text zprávy...'),	+	title: const Text('Chybně zadaná data:'),
−	actions: <Widget>[	+	content: Text(messageText),
−	TextButton(	+	actions: <Widget>[
−	onPressed: () {	+	TextButton(
−	Navigator.of(context).pop();	+	onPressed: () {
−	},	+	Navigator.of(context).pop();
−	child: const Text('OK'),	+	},
−	),	+	child: const Text('OK'),
−	],	+	),
−	);	+	],
−	},	+	);
−	);	+	},
		+	);
		+
		+	Metodu následně voláme:
		+	displayDialog('Text');

---

Aktuální verze z 14. 3. 2025, 07:42

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

Uspořádání stránky

Center( child: ... )

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

Textová pole

TextField(
  controller: _abcController,
  decoration: const InputDecoration(
    labelText: 'Popis – co zadávat',
  ),
  keyboardType: TextInputType.number, // Pokud chceme omezit vstup na číselné hodnoty
),

Kontroler textového pole

final TextEditingController _abcController = TextEditingController();

Zpracování obsahu textového pole

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

• Obdobně lze int.parse(...).

Další možnosti InputDecoration

contentPadding: EdgeInsets.all(20.0),

• Odsazení obsahu

border: OutlineInputBorder(),

• Ohraničení textového pole

hintText: 'Text'

• Nahrazuje labelText, ale po zadání textu do pole zmizí.

Tlačítka

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

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

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