Flutter short tutorial
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.dartwith 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
TextStyleobjects and properties likeEdgeInsets,Color, etc., directly within widget properties, while HTML/CSS uses<style>tags or external CSS files andclassattributes. - 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.builderorCustomScrollViewfor efficient rendering of large lists, while HTML/CSS uses<ul>or<ol>with<li>elements. - State Management: Flutter uses
StatefulWidgetandsetStatefor managing dynamic UI state, while HTML/CSS typically relies on JavaScript to manipulate the DOM.