[[oktatas:telefon:flutter|< Flutter]]

====== Flutter kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2023, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A Flutter-ről =====

A Flutter a Google kezdeményezése 2015 környékéről. Az 1.0 verzió 2018-ban jött ki. A [[oktatas:web:dart|Dart]] programozási nyelven használható, a Flutter is ebben let elkészítve. 

Előnye, hogy nem szükséges külön fejlesztőket alkalmazni a különböző platformokra. Egyszerre fejleszthetünk vele Windows, Linux macOS és mobil operációs rendszerekre.

Fordítási módok:
  * debug
  * release



===== Kezdő fájl =====

<code dart lib/main.dart>
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Text('Helló Világ!')
    )
  ));
}
</code>


Minden Flutter alkalmazásnak tartalmaznia kell egy tervező csomagot.

Ilyenek lehetnek:
  * material - Google fejlesztése
  * cuperino - iOS-hez fejlesztve
  * fluent_ui - Windowshoz fejlesztve

<note important>
Ha használjuk valamelyik csomagot, csak egyszer szerepeljen az alkalmazásban!
</note>

===== Futtatás =====
==== A futtatás ====

  * Kattintsunk a megnyitott main.dart állomány esetén a jobb felső sarokban a Run and Debug gombra.

Vagy:
  * A forráskódban kattintsunk a lebegő "Run" gombra.
 
==== Futtatási módok VSCode-ban ====

A Státusz sor jobb oldali részen, operációs rendszertől függően láthatjuk milyen módban vagyunk.

Linux mód például:
  * Linux (linux-x64)

Erre kattintva egyéb módok is választhatók. Ha az Android Studio-val van egy vagy több emulált Android, azok megjelennek ebben a listában.

==== Linux módban Debian GNU/Linuxon ====

  apt install cmake ninja-build clang

Ha a snap csomagkezelőt használjuk, nincs ilyen teendő.

Egy hibaüzenet kiküszöbölése:
Az **GDBus.Error:org.freedesktop.portal.Error.NotFound** hiba esetén, tegyünk a **/etc/environment** fájlba a következőt:

<code bash /etc/environment>
GTK_USE_PORTAL=1
</code>

A fejlesztett alkalmazás következő indításakor a hibaüzenet megszűnik.
===== VSCode wrapper =====

Szeretnénk a szöveget középre igazítani.

  * A szövegkurzort vigyük a Text widget-re.
  * Ctrl + .
  * Válasszuk ki, a Center widgetet

Az eredmény:

<code dart lib/main.dart>
import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(child: Text('Helló Világ!'))
    )
  ));
}
</code>


===== Hot reload =====

Eddig mindig újra kellett indítani a nézet frissítéséhez az alkalmazást.
Azt szeretnénk, hogy mentésre azonnal frissüljön az alkalmazás nézete.

Ehhez egy saját widget létrehozása szükséges.


Hozzuk létre az osztályunkat:

<code dart>
class MyApp extends StatelessWidget {

}
</code>

Vigyük az osztály nevére a szövegkurzort, majd Ctrl + . billentyűkombinációt használjuk.
Válasszuk:
  * Create 1 missing override

Tegyük át az alkalmazásunkat a runApp() hívásból build() hívásba, egy return után.

<code dart lib/main.dart>
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return 
    const MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Helló Világ!'))
      )
    );
  }
}
</code>

A return beszúrása és a ; pontosvessző beszúrása szükséges.

===== AppBar =====

<code dart lib/main.dart>
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return 
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Lorem')),
        body: const Text('Lorem ipsum dolor est amat')
      )
    );
  }
}
</code>

===== Sorok és oszlopok =====

A Column widget segítségével egymás alatt jeleníthetjük meg a beépített widgeteket.
A Row widget egy sorban teszi lehetővé a megjelenítést.

<code dart lib/main.dart>
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return 
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Lorem')),
        body:  Column(
          children: [
            Row(
              children: [
                Container(
                  color: Colors.yellow,
                  padding: const EdgeInsets.all(10),
                  child: const Text('Lorem ipsum dolor est amat')),
                Container(
                  color: Colors.yellow,
                  padding: const EdgeInsets.all(10),
                  child: const Text('Lorem ipsum dolor est amat')),
              ],
            ),
            Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(10),
              child: const Text('Lorem ipsum dolor est amat')),
          ],
        )
      )
    );
  }
}
</code>

===== Több fájl =====

<code dart lib/screens/mainwindow.dart>
import 'package:flutter/material.dart';

class Mainwindow extends StatelessWidget {
  const Mainwindow({super.key});

  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
        appBar: AppBar(title: const Text('Lorem')),
        body:  Container(
          color: Colors.yellow,
          padding: const EdgeInsets.all(10),
          child: const Text('Lorem ipsum dolor est amat'))
      );
  }
}
</code>

<code dart lib/main.dart>
import 'package:app01/screens/mainwindow.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return 
    const MaterialApp(
      home: Mainwindow(),
    );
  }
}

</code>

===== Számláló =====

A számlálót **StatefulWidget** segítségével készítjük el, mivel ezzel lehet állapotot tárolni.

<code dart lib/screens/mainwindow.dart>
import 'package:flutter/material.dart';

class Mainwindow extends StatefulWidget {
  const Mainwindow({super.key});

  @override
  State<StatefulWidget> createState() {
    return Mainstate();
  }

}

class Mainstate extends State<Mainwindow>{
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              counter++;
            });
          },
        ),
        appBar: AppBar(title: const Text('Számláló')),
        body:  Container(
          color: Colors.yellow,
          padding: const EdgeInsets.all(10),
          child: Center(child: Text(
            counter.toString(),
            style: const TextStyle(fontSize: 34)
            )))
      );
  }
}

</code>

<code dart lib/main.dart>
import 'package:app01/screens/mainwindow.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return 
    const MaterialApp(
      home: Mainwindow(),
    );
  }
}

</code>

{{:oktatas:telefon:flutter:szamlalo.png?300|}}