Flutter: Základní widgety

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(Textová položka)
(→Jednoduchý dialog: Lépe struktorováno, přidány příklady dialogů, připraveno na budoucí osamostatnění.)
 
(Není zobrazeno 13 mezilehlých verzí od 1 uživatele.)
Řádka 4: Řádka 4:
  
 
  Center( child: ... )
 
  Center( child: ... )
 +
* Vycentruje obsah uvnitř widgetu.
  
 
  Column(
 
  Column(
Řádka 9: Řádka 10:
 
   children: <Widget>[ ... ]
 
   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 ==
 
== Textová pole ==
Řádka 14: Řádka 25:
 
   controller: _abcController,
 
   controller: _abcController,
 
   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
 
  ),
 
  ),
 +
 +
; 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
 
  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>.
  
 +
_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),
 +
* 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 ==
 
== Tlačítka ==
Řádka 32: Řádka 77:
 
     child: const Text('Popis tlačítka'),
 
     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 ==
 
== ListView ==
−
* Pro zobrazení seznamu <code>seznam</code> můžeme použít ListView:
+
* Pro zobrazení dynamického seznamu prvků.
−
  Expanded(
+
* Více viz samostatná stránka [[Flutter: ListView]].
−
    child: ListView.builder(
+
 
−
      itemCount: _seznam.length,
+
== Odsazení ==
−
      itemBuilder: (context, index) {
+
SizedBox(height: 10),
−
        return ListTile(
+
 
−
            title: Text('${_seznam[index].abc}'),
+
Příklad použití:
−
            subtitle: Text('${_seznam[index].def}'),
+
Column(
−
        );
+
  const Text('Hello'),
−
      },
+
  const Sizedbox(height: 10),
−
    ),
+
  const Text('World!'),
−
  ),
+
)
  
 
== 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 ==
 +
 +
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,
 +
    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(
 
  showDialog(
 
   context: context,
 
   context: context,
−
   builder: (context) {
+
   builder: (context) => AlertDialog( ''...'' ),
−
    return AlertDialog(
+
  )
−
      title: const Text('Nadpis dialogu'),
+
−
      content: Text('Text zprávy...'),
+
−
      actions: <Widget>[
+
−
        TextButton(
+
−
          onPressed: () {
+
−
            Navigator.of(context).pop();
+
−
          },
+
−
          child: const Text('OK'),
+
−
        ),
+
−
      ],
+
−
    );
+
−
  },
+
−
  );
+

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


Obsah

Uspořádání stránky 

Center( child: ... )

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

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

Expanded( child: ... )

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:  

readOnly:  

onChanged: (text) { ... }


Kontroler textového pole 
final TextEditingController _abcController = TextEditingController();

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

_abcController.dispose()
Nastavení vzhledu InputDecoration 
contentPadding: EdgeInsets.all(20.0),

border: OutlineInputBorder(),

labelText: 'text'

hintText: 'Text'

Tlačítka 

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

child:

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) 

 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( ... ),
)
Citováno z „http://mis.e-mis.cz/index.php/Flutter:_Z%C3%A1kladn%C3%AD_widgety“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje