Flutter for Beginners widgets types.pptx

Flutter is an open-source user interface software development kit created by Google, designed to build beautiful, fast, and native-compiled applications for multiple platforms from a single codebase. Introduced publicly in 2017 after its initial beta releases, Flutter has revolutionized the world of cross-platform app development by allowing developers to write one set of Dart code and deploy it seamlessly across Android, iOS, Web, Windows, macOS, and Linux platforms. The main goal of Flutter is to simplify app creation by providing a consistent UI and high performance on every device, without requiring multiple codebases or platform-specific adjustments. Before Flutter’s introduction, developers traditionally had to maintain separate projects for Android (using Java or Kotlin) and iOS (using Swift or Objective-C), which increased time, cost, and complexity. Flutter eliminates this barrier by offering a unified framework that combines expressive and flexible UI with native performance, significantly speeding up development cycles and reducing maintenance overhead. Built using Google’s Dart programming language, Flutter leverages Dart’s ability to compile both ahead-of-time (AOT) and just-in-time (JIT), enabling fast startup times and the famous “hot reload” feature, which allows developers to see code changes instantly on the emulator or real device without restarting the app. This makes experimentation, debugging, and UI refinement remarkably efficient.

Flutter’s design philosophy revolves around widgets, where everything visible on the screen—from text and buttons to layouts and animations—is a widget. These widgets can be combined, nested, or customized to create complex interfaces that respond to user input or data changes. The framework offers two primary types of widgets: Stateless widgets, which represent static, unchanging elements, and Stateful widgets, which can dynamically change based on user interactions or data updates. Flutter’s widget tree structure allows developers to visualize their app as a hierarchy of UI components, making it both intuitive and modular. The pre-built widget sets—Material Design (for Android-like look and feel) and Cupertino (for iOS-style design)—allow developers to create platform-consistent UIs effortlessly while maintaining a shared logic layer. In addition to these, Flutter also enables developers to design highly customized widgets to achieve unique branding or design aesthetics.

Technically, Flutter’s architecture consists of three main layers: the Framework, the Engine, and the Embedder. The Framework, written in Dart, provides high-level APIs for building layouts, gestures, animations, and other UI features. The Engine, primarily written in C++, uses the Skia graphics library to render every pixel directly on the screen, bypassing native UI components. This direct rendering approach gives Flutter full control over the look and feel of the app, ensuring consistent performance across devices.

1. Flutter for Beginners Dr.T.Abirami Associate Professor Department of Information Technology Kongu Engineering College Perundurai [email protected] 9788654804

2. 🦋 What is Flutter? Flutter is an open-source UI framework created by Google for building beautiful, fast, cross-platform apps — from a single codebase. one set of Dart code to make: ✅ Android apps ✅ iOS apps ✅ Web apps ✅ Windows, macOS, and Linux desktop apps 💡 Write once, run anywhere.

3. 🎯 Purpose / Why Flutter was created developers had to build separate apps for Android (Java/Kotlin) and iOS (Swift/Objective-C). Flutter’s goal is to remove that duplication . Purpose: To build multi-platform apps using a single language (Dart) . To give native performance and beautiful UI on every device. To make development faster using Hot Reload (you can see changes instantly).

4. ⚙️ What is Flutter used for? Flutter is used to create: 🌍 Web apps (like dashboards, e-commerce sites, portals) 📱 Mobile apps (like Google Ads, Dream11, eBay Motors, BMW app) 💻 Desktop apps (like productivity or control panel tools) 🔌 Embedded UI (IoT devices, smart displays)

5. 💡 Need for Flutter Develop Android + iOS + Web apps quickly. Maintain only one codebase instead of multiple. Create modern, visually rich UIs. Avoid learning multiple languages (Kotlin, Swift, JS). Save time, money, and reduce bugs across platforms.

6. 🚀 Advantages of Flutter Feature Description Single codebase One Dart code runs on all platforms. Fast development (Hot Reload) UI/code changes instantly without full rebuild. Beautiful UI Uses its own rendering engine ( Skia ), not native components. High performance Compiles to native ARM code, runs fast like native apps. Open-source Free, large global community by Google. Strong community & packages 30,000+ plugins on pub.dev (e.g., Firebase, camera, maps). Custom widgets Build attractive, animated, and responsive UIs easily. Supports web and desktop Same app runs in Chrome, Windows, macOS, Linux.

7. 🧩 Programming Language used Flutter uses Dart , also developed by Google. Dart is easy to learn for anyone with Java, C++, or Python background.

8. 🛠️ Tools required to install Flutter Tool Purpose Git Used to download Flutter SDK and manage updates Dart SDK Comes with Flutter (no separate install needed) VS Code or any Editor For writing Flutter code Chrome browser To run Flutter Web apps Command line / Terminal To run Flutter commands

9. 🧩 Optional (for Android/iOS development) Android SDK or Android Studio (for emulators and native build tools) Xcode (only for macOS users building iOS apps)

10. 🧭 Installation (Step-by-Step) 🔹 Step 1: Download Flutter SDK 👉 Official site: https://docs.flutter.dev/get-started/quick Choose your OS: Flutter for Windows Flutter for macOS Flutter for Linux

11. Step 2: Extract and add to PATH git clone https://github.com/flutter/flutter.git -b stable C:\src\flutter setx PATH "%PATH%;C:\ src \flutter\bin"

12. Verify installation and enable web flutter --version

13. Verify installation and enable web flutter channel stable This command switches your Flutter SDK to use the Stable channel — the safest and most reliable version of Flutter. Internally, Flutter SDK is just a Git repository. So, this command: flutter channel stable is equivalent to: git checkout stable

14. Flutter is developed continuously by Google and has different release channels — like "branches" in Git — representing different stability levels of the SDK. Flutter has four main channels: Channel Description Update Frequency Use Case stable Officially tested, production-ready releases ~Every 3 months For app releases, reliability beta Next version candidate; mostly stable but may have minor bugs Monthly Testing upcoming features early dev Frequently updated, less tested Weekly For developers who need latest framework improvements master Latest commits from Flutter’s GitHub (bleeding edge) Daily For Flutter contributors or very advanced users Flutter channel

15. Create and run your first app Step 1 : flutter create hello_world Step 2: cd hello_world Step 3: flutter run -d chrome

16. project tree hello_world / ├─ android/ # Android native project (Gradle, manifests) ├─ ios / # iOS native project (Xcode workspace) ├─ web/ # web build files (if web enabled) ├─ macos / windows/ linux / # optional desktop platform projects ├─ lib/ │ ├─ main.dart # app entry point (your Dart code) │ └─ src / # optional: put feature code here ├─ test/ # unit/widget tests ├─ build/ # generated build outputs (auto-created) ├─ . dart_tool / # tool state (auto-created) ├─ . vscode / or .idea/ # editor config (optional) ├─ pubspec.yaml # project manifest (dependencies, assets) ├─ pubspec.lock # locked dependency versions (auto) ├─ analysis_options.yaml # static analysis rules (optional) ├─ README.md ├─ . gitignore └─ CHANGELOG.md (optional)

17. Most important files & folders — what they mean lib/ main.dart — entry point. Contains main() and runApp (...). This is where your app starts. Put most of your app code here. Common patterns: lib/ main.dart , lib/ src / or lib/screens/, lib/widgets/, lib/models/. pubspec.yaml (critical) Project name, description, version. dependencies: — packages your app uses (e.g., flutter, cupertino_icons , http). dev_dependencies : — test/lint tools. flutter: section — where you list assets and fonts.

18. Flutter Programming https://api.flutter.dev/index.html

19. Auto Hot Reload (in VS Code or Android Studio) In the terminal window where Flutter is running, press: r → for hot reload R → for hot restart The change appears instantly in the app.

20. packages import ' package:flutter / material.dart '; Purpose: Loads the Flutter Material Design library , which contains widgets like MaterialApp, Scaffold, AppBar , Text , etc. MaterialApp → provides theme and overall app structure. Scaffold → gives you a full page layout. AppBar → shows the top bar with title. Text → displays your content.

21. 🧱 1️⃣ MaterialApp Use / Purpose Main root widget for Material Design apps. It sets up themes , routes , navigation , and title bar . Provides the base structure and styling (colors, fonts, transitions) following Google’s Material Design system. 🔹 Why we need it Without MaterialApp, widgets like Scaffold, AppBar , and TextTheme won’t have access to Material styling. It gives your app a consistent look and feel across platforms.

22. Property Description home The default screen widget of your app. title App title (used by Android/iOS task manager). theme Defines colors , fonts, and styles. routes Named routes (for navigation). debugShowCheckedModeBanner Hides debug banner. 🧱 1️⃣ MaterialApp - Key Properties

23. import ' package:flutter / material.dart ' ; void main (){ runApp ( MaterialApp ( home : Text ( "Kongu Engg " ), )); }

24. Entry point void main() { runApp ( MyApp ()); } main() is the starting point of every Dart/Flutter program. runApp () tells Flutter which widget to display first . MyApp () is a custom widget (your app), defined below.

25. 🧩 2️⃣ Scaffold Use / Purpose Provides a basic visual layout structure for your screen (page). Gives a ready-made framework that includes: App bar Body Floating action button Drawer (side menu) Bottom navigation bar 🔹 Why we need it Without Scaffold, you’d have to manually handle screen layout and safe areas. It handles system UI features automatically (like status bar padding, background color, etc.).

26. Property Description appBar Top bar with title, icons, actions. body Main content of the screen. floatingActionButton Floating button (for quick actions). drawer Side navigation menu. bottomNavigationBar Bottom bar navigation. backgroundColor Screen background color . 🧩 2️⃣ Scaffold – Key Properties

27. 🔹 Example Scaffold( appBar : AppBar(title: Text('Home')), body: Center (child: Text('Welcome!')), floatingActionButton : FloatingActionButton ( onPressed : () {}, child: Icon( Icons.add ), ), )

28. 🎛️ 3️⃣ AppBar 🔹 Use / Purpose The top bar (header) of your app screen. Used to show title, actions (like search, menu, settings), and navigation icons (back button, drawer icon). 🔹 Why we need it Gives a consistent and beautiful top header across all screens. Provides built-in animation and system integration.

29. 🎛️ 3️⃣ AppBar – Key Properties Property Description title Widget (usually Text) displayed in the center/left. backgroundColor Color of the AppBar. actions List of icons or widgets on the right. leading Widget on the left (e.g. back button). centerTitle Center the title (true/false).

30. 🔹 Example AppBar( title: Text(' Kongu Engg '), backgroundColor : Colors.blueAccent , actions: [ IconButton ( onPressed : () {}, icon: Icon( Icons.search )), ], )

31. ✍️ 4️⃣ Text 🔹 Use / Purpose Displays a string of text on the screen. One of the simplest but most-used widgets in Flutter. 🔹 Why we need it Every label, title, or message on your screen uses a Text widget. Highly customizable for style, font, color, and alignment.

32. ✍️ 4️⃣ Text – Key Properties Property Description data The text string to display. style Font size, color, weight, etc. textAlign Alignment (left, right, center ). maxLines Limit number of visible lines. overflow Handle overflow text (ellipsis, clip).

33. 🔹 Example Text( 'Welcome to Kongu Engineering College', style: TextStyle( fontSize : 22, fontWeight : FontWeight.bold , color : Colors.blue , ), textAlign : TextAlign.center , )

34. 🧱 1️⃣ What is a Widget? 👉 In Flutter , everything you see on the screen is a widget — text, buttons, images, layouts, and even the entire app itself. A widget is just a building block of the user interface (UI) . Think of widgets like Lego pieces — each one does a small job, and you combine them to build your full app.

35. 🎯 2️⃣ Purpose of a Widget Widgets are used to: Build the UI layout . Manage the state (data that changes on screen). Handle user interactions (like button taps). Apply styling and themes . In short: a widget tells Flutter what to draw and how to behave .

36. ⚙️ 3️⃣ Why we need Widgets Without widgets, you’d have to write raw layout code (like Android XML or iOS Storyboards). Flutter widgets make UI development: Declarative (you describe what you want, Flutter handles how ). Faster (hot reload). Consistent (same look across Android, iOS, Web).

37. 🧩 4️⃣ Types of Widgets Flutter widgets are mainly divided into two types: Type Description When to use Stateless Widget UI does not change over time For static content Stateful Widget UI changes when data or user input changes For dynamic or interactive screens

38. 🧱 A) Stateless Widget import ' package:flutter / material.dart '; void main() => runApp (const MyApp ()); class MyApp extends StatelessWidget { const MyApp ({ super.key }); @override Widget build( BuildContext context) { return const MaterialApp ( home: Scaffold( body: Center ( child: Text( 'Welcome to Kongu Engg ', style: TextStyle( fontSize : 24, color : Colors.purple ), ), ), ), ); } } Doesn’t change once built. Example: labels, icons, static pages. 🟢 Output: A simple screen showing “Welcome to Kongu Engg ”. 🧠 UI stays same always — no data change.

39. 🎨 1️⃣ Using Scaffold.backgroundColor import ' package:flutter / material.dart '; void main() => runApp (const MyApp ()); class MyApp extends StatelessWidget { const MyApp ({ super.key }); @override Widget build( BuildContext context) { return const MaterialApp ( home: Scaffold( backgroundColor : Colors.lightBlueAccent , // 👈 sets background color body: Center ( child: Text( 'Welcome', style: TextStyle( fontSize : 30, color : Colors.white ), ), ), ), ); }}

40. ✅ Flutter Code: Get name and print it

41. 🔁 B) Stateful Widget import ' package:flutter / material.dart '; void main() => runApp (const MyApp ()); class MyApp extends StatefulWidget { const MyApp ({ super.key }); @override State< MyApp > createState () => _ MyAppState (); } class _ MyAppState extends State< MyApp > { int count = 0; @override Widget build( BuildContext context) { return MaterialApp ( home: Scaffold( appBar : AppBar(title: const Text('Counter Example')), body: Center ( child: Text( 'Count: $count’, style: const TextStyle( fontSize : 30), ), ), floatingActionButton : FloatingActionButton ( onPressed : () { setState (() { count++; // updates UI }); }, child: const Icon( Icons.add ), ), ), ); } }

42. 🧠 5️⃣ Additional categories of widgets Category Example Widgets Purpose Layout Widgets Row , Column , Stack , Container , Center Arrange other widgets Input Widgets TextField , Checkbox , Radio , Slider , Button Take user input Display Widgets Text , Image , Icon , Card , ListTile Show information Interaction Widgets GestureDetector , InkWell Handle touch, tap, drag Styling Widgets Padding , Align , DecoratedBox Add space or decoration Scaffold Widgets Scaffold , AppBar , Drawer Structure the screen Navigation Widgets Navigator , BottomNavigationBar Move between screens

43. import ' package:flutter / material.dart '; void main() => runApp (const MaterialApp (home: WelcomeWidget ()) ); class WelcomeWidget extends StatelessWidget { const WelcomeWidget ({ super.key }); @override Widget build( BuildContext context) { return const Scaffold( appBar : AppBar(title: Text('Widget Example')), body: Center (child: Text('Welcome to Flutter Widgets!')), ); } }

44. 🧩 Example: import ' package:flutter / material.dart '; void main() { runApp (const MyApp ()); } class MyApp extends StatelessWidget { const MyApp ({ super.key }); @override Widget build( BuildContext context) { return const MaterialApp ( home: Center ( child: Text( 'Hello, Flutter!', style: TextStyle( fontSize : 30, color : Colors.blue ), ), ), ); } } MaterialApp → a root widget (sets up theme/navigation) Center → a layout widget (positions child at center) Text → a UI widget (displays string)

45. 🧠 5️⃣ How they all work together 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 ( debugShowCheckedModeBanner : false, home: Scaffold( appBar : AppBar(title: const Text(' Kongu Engg ')), body: const Center ( child: Text( 'Welcome', style: TextStyle( fontSize : 28, fontWeight : FontWeight.bold ), ), ), ), ); }}

46. import ' package:flutter / material.dart '; void main() { runApp ( MaterialApp ( home: Scaffold( body: Center ( child: ElevatedButton ( onPressed : () { // Action when button is pressed print("Button Pressed"); }, child: Text("Click Me"), style: ElevatedButton.styleFrom ( backgroundColor : Colors.green , // button color foregroundColor : Colors.white , // text color padding: EdgeInsets.symmetric (horizontal: 50, vertical: 67), textStyle : TextStyle( fontSize : 45), ), ), ), ), ), ); }

47. Example: Rectangle ElevatedButton shape: RoundedRectangleBorder ( // 👇 Rectangle shape borderRadius : BorderRadius.zero , ),

48. Class (shortcut stless ) & properties ( Ctrl+space keys) 3. class MyApp extends StatelessWidget You’re creating a new widget called MyApp . StatelessWidget means the screen does not change during runtime (no dynamic content). class MyApp extends StatelessWidget { @override Widget build( BuildContext context) { return ...; // UI layout } }

49. import ' package:flutter / material.dart '; void main() { runApp ( MyApp ()); } class MyApp extends StatelessWidget { @override Widget build( BuildContext context) { return MaterialApp ( home:Text (" Abirami "), ); } } 4. MaterialApp(...) Root of your app that sets up: Title Theme Routes First screen (home) Property Use title App name (seen in Android task manager) home The first widget/screen shown theme ( Optional ) Controls colors , fonts, etc.

50. What is Scaffold? Scaffold is a built-in Flutter widget that provides a basic structure (layout) for your app screen . It helps you easily add: AppBar (top bar) Body (main content) Floating Action Button Drawer (side menu) Bottom Navigation Bar, etc.

51. import ' package:flutter / material.dart '; void main() { runApp ( MaterialApp ( debugShowCheckedModeBanner : false, title: ' Kongu App', theme: ThemeData ( scaffoldBackgroundColor : Colors.lightBlue , ), home: Scaffold( body: Center ( child: Text( " Kongu Engg ", style: TextStyle( fontSize : 24, color : Colors.white , ), ), ), ), )); }

52. import ' dart:html '; import ' package:flutter / material.dart '; void main() { runApp (Test()); } class Test extends StatelessWidget { @override Widget build( BuildContext context) { return MaterialApp ( home: Scaffold( body:Text ("Anbu"), )); }}

53. Basic Syntax of Scaffold Scaffold( appBar : AppBar(title: Text('Title')), body: Center (child: Text('Hello')), backgroundColor : Colors.blue , floatingActionButton : FloatingActionButton ( onPressed : () {}, child: Icon( Icons.add ), ), ) Property Purpose appBar Adds a top bar (title, icons, etc.) body Main screen content backgroundColor Set the background color of the screen floatingActionButton Shows a circular button usually used for main action drawer Adds a left-side sliding menu bottomNavigationBar Adds a bottom bar for navigation persistentFooterButtons Adds buttons at the bottom that stay fixed resizeToAvoidBottomInset Handles screen resize when keyboard appears

54. import ' package:flutter / material.dart ' ; void main () => runApp ( MyApp ()); class MyApp extends StatelessWidget { @override Widget build ( BuildContext context) { return MaterialApp ( home: Scaffold( appBar : AppBar (title: Text("My App")), body: Center(child: Text("Welcome to Flutter!")), ), ); } }

55. import ' package:flutter / material.dart '; void main() => runApp ( MyApp ()); class MyApp extends StatelessWidget { @override Widget build( BuildContext context) { return MaterialApp ( home: Scaffold( backgroundColor : Colors.lightGreenAccent , appBar : AppBar(title: Text("Green Screen")), body: Center (child: Text("Hello!")), ) ); } }

56. import ' package:flutter / material.dart '; void main() => runApp ( MyApp ()); class MyApp extends StatelessWidget { @override Widget build( BuildContext context) { return MaterialApp ( home: Scaffold( backgroundColor : Colors.lightGreenAccent , appBar : AppBar(title: Text("Green Screen" )), body: Center (child: Text("Hello!“ , style: TextStyle ( fontSize : 30, fontWeight : FontWeight.bold , ), )), ) ); } }

57. Screen – background image

58. Step-by-Step Instructions Step 1 : Add your image to project folderInside your Flutter project directory: Navigate to: your_project_name /assets/images/ If assets or images folders do not exist, create them. your_project / └── assets/ └── images/ └── bg.jpg ← (your background image here)

59. Step 2: Update pubspec.yaml file Open pubspec.yaml and add this under flutter: section : flutter: assets: - assets/images/bg.jpg flutter: assets: - assets/images/bg.jpg Make sure: Indentation is correct (use 2 spaces ). The file is saved after editing. Get dependencies – clicl -its update pub file

60. import ' package:flutter / material.dart ’; void main() => runApp ( MaterialApp (home: BackgroundImageApp ())); class BackgroundImageApp extends StatelessWidget { @override Widget build( BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration ( image: DecorationImage ( image: AssetImage ("assets/images/flow.jpg"), fit: BoxFit.cover , // covers entire screen ), ), child: Center ( child: Text( "Hello Flutter!", style: TextStyle( color : Colors.white , fontSize : 24), ), ), ), ); } }

61. Part Meaning AssetImage(...) Loads image from your local folder fit: BoxFit.cover Makes image cover full screen child: Center(...) Allows you to place widgets on top of image

62. ImageButton

63. import ' package:flutter / material.dart '; void main() => runApp ( MaterialApp (home: ImageButton ())); class ImageButton extends StatelessWidget { @override Widget build( BuildContext context) { return Scaffold( body: Center ( child: InkWell ( onTap : () { print("Image button clicked"); }, child: Image.asset ("assets/images/ima.jpg", width: 100), ), ), ); } }

64. Clickable image icon (like a button)

65. import ' package:flutter / material.dart '; void main() => runApp ( MaterialApp (home: ImageIconButton ())); class ImageIconButton extends StatelessWidget { @override Widget build( BuildContext context) { return Scaffold( body: Center ( child: InkWell ( onTap : () { print("Image icon tapped"); }, child: Image.asset ("assets/images/face.jpg", width: 50), ), ), ); } }