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:

1. Make sure you have the Flutter SDK installed and configured.

2. Create a new Flutter project: flutter create MyTodoApp

3. Navigate into the project directory: cd MyTodoApp

4. Replace the contents of lib/main.dart with the code above.

5. 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.