Introduction to Flutter: Building a Simple Hello World Page

This guide is aimed at beginners interested in Flutter and walks through creating a simple page to give a basic understanding of the framework.

Flutter Overview – Flutter is Google’s UI toolkit that enables developers to build beautiful native‑compiled applications for mobile, web, and desktop from a single codebase. It uses its own rendering engine and a layered architecture.

Flutter Architecture – The framework layer is written in Dart and includes Material and Cupertino widget libraries for Android‑style and iOS‑style components. Below it are layers for rendering, animation, painting, gestures, and foundation APIs. The engine layer, written in C++, uses Skia for 2‑D graphics and provides Dart bindings and text rendering.

All visible UI in Flutter is composed of Widget s; everything is a widget.

Key Widgets Introduced

StatelessWidget – a widget without mutable state.

StatefulWidget – a widget that holds mutable state via a State object and updates the UI with setState() .

Text – displays a string of text, similar to iOS UILabel.

Image – displays an image, e.g., from a network source.

FlatButton – a clickable button (iOS equivalent is UIButton ).

GestureDetector – wraps a widget to capture touch gestures.

Column – arranges children vertically.

Container – a versatile box widget.

ListView and ListTile – create scrollable lists and list items.

Creating a Simple Hello World Page

The UI is built with a MaterialApp (Android style) or CupertinoApp (iOS style). The main entry point looks like:

void main(List
args) { runApp(MaterialApp(title: 'Demo', home: QiStatelessApp())); }

A basic stateless widget example:

class QiStatelessApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('App Bar')), body: Center(child: Text('Hello World')), ), ); } }

For interactive UI, a stateful widget is used, showing how to handle button presses, update state, and display a BottomNavigationBar .

Navigation and Data Passing

Pages can be pushed onto the navigation stack with Navigator.push and return data using Navigator.pop :

Navigator.push(context, MaterialPageRoute(builder: (context) => QiListViewPage('iOS Dev'))).then((value) { print('Returned: $value'); });

Navigator.pop(context, 'FlutterDev');

Full Sample Code

import 'package:flutter/material.dart';

void main(List
args) { runApp(MaterialApp(title: 'Demo', home: QiStatefulApp())); }

class QiStatefulApp extends StatefulWidget { @override State createState() => QiState(); }

class QiState extends State
{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('App Bar')), body: Center(child: Text('Hello World')), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Work'), BottomNavigationBarItem(icon: Icon(Icons.security), label: 'Security'), ], onTap: (index) { print('Tapped $index'); }, ), ); } }

Reference Materials

https://flutter.dev/docs/development/ui/widgets-intro

https://book.flutterchina.club/chapter3/flutter_widget_intro.html

The article also lists related articles on Flutter Platform View, Platform Channel, and the dart:io library for further study.