Icon
Get In Touch
HomeShop OnlineFree ResourcesBlog / NewsLearn How ToTerms And ConditionsContact Us
#flutter

Introduction to Flutter

Flutter is Google's open-source UI toolkit for building natively compiled mobile from a single codebase. It uses the Dart programming language and provides a fast development cycle with its hot reload feature, a rich set of customizable widgets, and native performance.

Installing Flutter

01. Download Flutter for your operating system.
02. Set up your preferred IDE (VS Code or Android Studio).
03. Connect a device or emulator to test your application.

Lets start by creating a simple Flutter app that prints "Hello World" on the screen.

Create New Project Using VS Code

Go to View > Command Palette (Ctrl / Cmd + Shift + P)
Type flutter
Select the Flutter: New Project

1
// Importing the Flutter material package
2
import 'package:flutter/material.dart';
3


4
// The main function is the entry point for every Flutter app.
5
void main() {
6
  runApp(const MainApp()); // Calls the MainApp widget to start the app
7
}
8


9
// Creating a StatelessWidget. This widget does not change state.
10
class MainApp extends StatelessWidget {
11
  const MainApp({super.key});
12
  
13
  @override
14
  Widget build(BuildContext context) {
15
    // The MaterialApp widget sets up the app and its theme
16
    return MaterialApp(
17
    debugShowCheckedModeBanner: false, //Removes debug banner
18
      home: Scaffold( // Scaffold provides the basic structure for the app
19
        appBar: AppBar( // AppBar widget for the top app bar
20
          title: const Text('Hello World App'),
21
        ),
22
        body: const Center( // Center widget centers the text
23
          child: Text('Hello World'), // Text widget displays the text
24
        ),
25
      ),
26
    );
27
  }
28
}

Key Takeaways

- Every Flutter app starts with the main() function.
- runApp() initializes the widget tree and starts the app.
- Scaffold provides the basic structure, including an app bar and a body section.

©2024 Codeblockz

Privacy Policy