Flutter: Základní widgety

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

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