Flutter: Short Tutorial

0:00

FLUTTER

1. Flutter: A Short Tutorial

What is Flutter?
- An open-source UI software toolkit developed by Google.
- It allows developers to build natively compiled applications for mobile (iOS, Android), web, and desktop (Windows, macOS, Linux) from a single codebase using the Dart programming language.
- It uses its own rendering engine (Skia) to draw widgets directly onto the screen, bypassing native OEM widgets.
What is it Used For?
- Building high-performance, visually appealing, cross-platform applications for mobile, web, and desktop.
- Creating apps with a consistent look and feel across different platforms.
- Rapid development due to features like hot reload.
Key Advantages:
- Cross-Platform: Write code once, deploy to iOS, Android, web, and desktop.
- Performance: Compiles to native machine code (ARM or x64), offering excellent performance.
- Rich Widget Library: Comes with a comprehensive set of customizable widgets (Material Design and Cupertino).
- Hot Reload: Speeds up development by allowing you to see changes instantly without losing application state.
- Dart Language: Uses Dart, a modern, object-oriented language optimized for UI development.
- Growing Community: Large and rapidly growing community with good documentation.

2. Sample Flutter TODO App (Basic)

This is a simple TODO app that allows you to add items and remove them. It demonstrates basic Flutter widgets, state management, and list rendering.

Hot Reload: Speeds up development by allowing you to see changes instantly without losing application state.

*   **Dart Language:** Uses Dart, a modern, object-oriented language optimized for UI development.

*   **Growing Community:** Large and rapidly growing community with good documentation.

2. Sample Flutter TODO App (Basic)

This is a simple TODO app that allows you to add items and remove them. It demonstrates basic Flutter widgets, state management, and list rendering.

keyboard_arrow_downdartcontent_copyOpen

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: 'My TODO App',

theme: ThemeData(

primarySwatch: Colors.blue,

To Run This App:

Make sure you have the Flutter SDK installed and configured.
Create a new Flutter project: flutter create MyTodoApp
Navigate into the project directory: cd MyTodoApp
Replace the contents of lib/main.dart with the code above.
Run the app: flutter run (make sure you have a device or emulator connected).

3. Flutter vs. HTML/CSS Comparison Table

Flutter Widget	HTML/CSS Equivalent	Flutter Example	HTML/CSS Example
`Container`	`<div>`, `<span>`	`Container(padding: EdgeInsets.all(16.0), color: Colors.blue, child: ...)`	`<div style="padding: 16px; background: blue;"> ... </div>`
`Text`	`<p>`, `<h1>`, `<span>`, etc.	`Text('Hello, World!', style: TextStyle(fontSize: 20))`	`<p style="font-size: 20px;">Hello, World!</p>`
`Image`	`<img>`	`Image.asset('assets/logo.png')`	`<img src="logo.png" alt="Logo" />`
`ElevatedButton`	`<button>`	`ElevatedButton(onPressed: handlePress, child: Text('Click Me'))`	`<button onclick="handleClick()">Click Me</button>`
`TextField`	`<input type="text">`	`TextField(controller: _controller, decoration: InputDecoration(hintText: 'Enter text'))`	`<input type="text" placeholder="Enter text">`
`ListView.builder`	`<ul>`, `<ol>`	`ListView.builder(itemCount: items.length, itemBuilder: (context, index) ...)`	`<ul><li>Item 1</li><li>Item 2</li></ul>`
`SingleChildScrollView`	`<div>` with `overflow: auto`	`SingleChildScrollView(child: ...)`	`<div style="overflow: auto;"> ... </div>`
`GestureDetector`	`<div>` with `onclick`, `<button>`	`GestureDetector(onTap: handlePress, child: Text('Pressable'))`	`<button onclick="handlePress()">Pressable</button>`
`TextStyle`	`style` attribute	`TextStyle(fontSize: 16, fontWeight: FontWeight.bold)`	`style="font-size: 16px; font-weight: bold;"`
`EdgeInsets` (padding)	`padding` attribute	`Container(padding: EdgeInsets.all(8.0), child: ...)`	`<div style="padding: 8px;"> ... </div>`
`EdgeInsets` (margin)	`margin` attribute	`Container(margin: EdgeInsets.all(10.0), child: ...)`	`<div style="margin: 10px;"> ... </div>`
`onPressed` callback	`onclick` attribute	`ElevatedButton(onPressed: handlePress, ...)`	`<button onclick="handlePress()">...</button>`
`onChanged` callback	`oninput` attribute	`TextField(onChanged: setText, ...)`	`<input oninput="setText(event.target.value)">`
`controller` property	`value` attribute	`TextField(controller: _controller, ...)`	`<input value="text">`
`Key`	`key` attribute (for lists)	`ListTile(key: Key(item.id), ...)`	`<ul><li key="123">...</li></ul>`

Key Differences:

Styling: Flutter uses TextStyle objects and properties like EdgeInsets, Color, etc., directly within widget properties, while HTML/CSS uses <style> tags or external CSS files and class attributes.
Components: Flutter uses specific Dart widget classes (Container, Text, Image, etc.), while HTML/CSS uses standard HTML tags (<div>, <p>, <img>, etc.).
Event Handling: Flutter uses camelCase property names (onPressed, onChanged, onTap), while HTML/CSS uses lowercase attribute names (onclick, oninput).
Lists: Flutter uses ListView.builder or CustomScrollView for efficient rendering of large lists, while HTML/CSS uses <ul> or <ol> with <li> elements.
State Management: Flutter uses StatefulWidget and setState for managing dynamic UI state, while HTML/CSS typically relies on JavaScript to manipulate the DOM.

Flutter Widget

HTML/CSS Equivalent

Flutter Example

HTML/CSS Example

Container

<div>, <span>

Container(padding: EdgeInsets.all(16.0), color: Colors.blue, child: ...)

<div style="padding: 16px; background: blue;"> ... </div>

Text

<p>, <h1>, <span>, etc.

Text('Hello, World!', style: TextStyle(fontSize: 20))

<p style="font-size: 20px;">Hello, World!</p>

Image

<img>

Image.asset('assets/logo.png')

<img src="logo.png" alt="Logo" />

ElevatedButton

<button>

ElevatedButton(onPressed: handlePress, child: Text('Click Me'))

<button onclick="handleClick()">Click Me</button>

TextField

<input type="text">

TextField(controller: _controller, decoration: InputDecoration(hintText: 'Enter text'))

<input type="text" placeholder="Enter text">

ListView.builder

<ul>, <ol>

ListView.builder(itemCount: items.length, itemBuilder: (context, index) ...)

<ul><li>Item 1</li><li>Item 2</li></ul>

SingleChildScrollView

<div> with overflow: auto

SingleChildScrollView(child: ...)

<div style="overflow: auto;"> ... </div>

GestureDetector

<div> with onclick, <button>

GestureDetector(onTap: handlePress, child: Text('Pressable'))

<button onclick="handlePress()">Pressable</button>

TextStyle

style attribute

TextStyle(fontSize: 16, fontWeight: FontWeight.bold)

style="font-size: 16px; font-weight: bold;"

EdgeInsets (padding)

padding attribute

Container(padding: EdgeInsets.all(8.0), child: ...)

<div style="padding: 8px;"> ... </div>

EdgeInsets (margin)

margin attribute

Container(margin: EdgeInsets.all(10.0), child: ...)

<div style="margin: 10px;"> ... </div>

onPressed callback

onclick attribute

ElevatedButton(onPressed: handlePress, ...)

<button onclick="handlePress()">...</button>

onChanged callback

oninput attribute

TextField(onChanged: setText, ...)

<input oninput="setText(event.target.value)">

controller property

value attribute

TextField(controller: _controller, ...)

<input value="text">

Key

key attribute (for lists)

ListTile(key: Key(item.id), ...)

<ul><li key="123">...</li></ul>

Flutter: Short Tutorial

🔍 Explore More Topics

Python: Concurrency Models Explained

Database Normalization: A Complete Step-by-Step Guide

Angular: Beginner Tutorial

Job Role: Python Developer

Job Role: Java Developer

Job Role: Java Spring Boot Developer

Flutter: Short Tutorial