# 6. Flutter

### Understanding Flutter

Flutter is an open-source UI toolkit by Google used to build natively compiled applications for mobile, web, and desktop from a single codebase. It’s designed for creating visually attractive and fast-performing apps using the Dart programming language.

Core Concepts:

* Widgets: Everything in Flutter is a widget — buttons, text, layouts, etc.
* Hot Reload: Allows developers to see UI changes instantly without losing app state. 
* Dart Language: Flutter apps are written in Dart, a language optimised for UI development, it is compiled to javascript when run. 
* Cross-Platform: With one codebase, Flutter compiles into native code for iOS, Android, Web, and Desktop.
* Tree Structure: Flutter uses a widget tree to define UI elements, making layout and styling intuitive.

Flutter's structure follows clear conventions for organising files and improving maintainability.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfW1Z1Q3J4ssuJlPUd2bLoIElFt-8fq43Wi5dp2qJDz44GlyvrgQE1sjMm3EER3KmrhzgJm6bRSOdd28q1TnKZerCSH-arQx-myrqIcPiAvhniNzXVjspbpqVe4mB8d7WplLdZp5w?key=FZqmpJRXxopvSMqIOKJzAPlV" alt=""><figcaption></figcaption></figure>

Flutter holds a vast library of tools and widgets, which at first may seem very overwhelming. For a more in depth understanding  of how to use and run flutter follow this [link](https://flutter.dev/learn). The best way to go about this would be to do some coding together.&#x20;

### Flutter Basics Recap

Everything in Flutter is a **widget** — even padding and alignment. Layouts are built using composition, not inheritance.

* **StatelessWidget:** UI that does not change (static screen).&#x20;
* **StatefulWidget:** UI that updates over time (forms, lists).&#x20;
* **Scaffold** : Layout structure with app bar, body, FAB
* **TextFormField:** Input widget with validation callbacks.  &#x20;
* **ListView\.builder**: Dynamically builds lists of data.

#### Building Dynamic UI

You can display backend data by fetching it asynchronously and updating using 'setState()

```dart
@override
void initState() {
  super.initState();
  fetchUsers();
}
```

### Setting up your simulator

Flutter has Hot Reload, which means that the application will update live upon code changes. This is super helpful for understanding what different widgets do on the page. So lets connect now.&#x20;

1. Go to the lib/main.dart directory&#x20;
2. Open the Command Palette (Ctrl + Shift + P)
3. Search Flutter: Select Device and select FindingNibbles-Spike&#x20;

In the navigation bar Run → Run Without Debugging

I would advise setting your mobile device to share a screen with your code. It may look like this:

<figure><img src="https://3191976129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuNe0Bz4zOAJoU0XMQXnd%2Fuploads%2F9MnOAJy2DsfPMOK4qR3I%2Fimage.png?alt=media&#x26;token=682225c2-3141-452f-b4ce-6c485d26a9f1" alt=""><figcaption></figcaption></figure>

### main.dart

Similar to NestJS, dart has a main file in which the app is run. Navigate to this file which will be found in **frontend/lib** directory. Update this file, to this code. This will cause an error until we develop a screen, but the simplicity of the design makes it easier to understand.

{% code title="main.dart" %}

```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(
      title: 'User Manager',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: const UserScreen(),
    );
  }
```

{% endcode %}

The main() function is the entry point where the app starts running. runApp() is a Flutter function that launches the app and attaches the provided widget to the screen. The widget inside runApp() becomes the root widget (MaterialApp).&#x20;

The MyApp class is the root widget for the app. Extending StatelessWidget indicates that this widget does not hold dynamic state. Use StatelessWidget for static UI that doesn't change. Use StatefulWidget for dynamic data that can update. The build() method describes what the UI should render.

**MaterialApp** is the primary widget that sets up, navigation theming, localisation, initial Route (First Screen).&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXckg8kL2LaGFd3r5bii_LNS1g0N0vYds5sM9oLbuvJzjrnGkrYhqc0IoKHWBcjvPi8MkIvDvvdO3nCwKjiR-uk92S30IbJEjmF-_qSV2MDgvwMWGsXbkp8UNYSWsql1cSHQXKnR?key=FZqmpJRXxopvSMqIOKJzAPlV" alt=""><figcaption></figcaption></figure>

With this basic understanding of the fundamentals of Flutter, lets learn how to connect to our backend.