Flutter Lecture Notes

Fundamentals of Dart

DartPad

• Access DartPad at dartpad.dev
• Click Run to execute code
• Console displays outputs

Basics

• print('Hello') must be terminated with a semicolon ;
• Creates variables with specific types:
  • String text = 'Hello';
  • double decimal = 5.5;
  • int number = 5;
• Use .toString() to convert numbers to strings for printing

Constants and Finals

• const values known at compile time
• final values initialized at runtime
• Examples:
  • const String food = 'Pizza';
  • final String topping = 'Bacon';

Switch-Case

• Used for conditional logic based on values
• Syntax:

  switch(variable) {
    case 'value1':
      // code
      break;
    case 'value2':
      // code
      break;
    default:
      // code
  }
  

If-Else Statements

• Simple conditional logic
• Syntax:

  if (condition) {
    // code if true
  } else {
    // code if false
  }
  

For Loop

• Loop through a set of values
• Syntax:

  for (int i = 0; i < 5; i++) {
    print(i.toString());
  }
  

Null Safety

Question Mark (?) and Exclamation Point (!)

• ? makes a variable nullable (can be null)
• ! asserts that a value is non-null

Examples

• bool? isAdmin = null; // Nullable boolean
• Exclamation usage:

  if (text == 'Pizza') {
    isAdmin = true;
  }
  print(isAdmin!); // Asserts isAdmin is non-null
  

Flutter Project Setup

Creating a New Flutter Project

• Open command prompt or terminal
• Navigate using cd (change directory)
• Create project: flutter create project_name
• Open project in Visual Studio Code or Android Studio

VS Code Shortcuts

• Ctrl + J: Show/Hide terminal
• Ctrl + B: Show/Hide explorer

Flutter UI Basics

Scaffold and Widgets

• Scaffold: Basic structure of the app
• AppBar: Top bar of the app
  • Example:

    AppBar(
      title: Text('Title'),
      centerTitle: true,
      backgroundColor: Colors.red,
    )
    

• body: Central area of the app
• Widgets are nested inside each other to build the UI

Adding Images

• Store images in an images folder
• Reference in pubspec.yaml
• Display image:

  Image.asset('images/your_image.png')
  

Network Images

• Use Image.network to display images from a URL

  Image.network('image_url')
  

Center Widget

• Centers a child widget within its parent

  Center(
    child: Image.asset('images/your_image.png'),
  )
  

Formatted Document Shortcut

• Shift + Alt + F or right-click and select Format Document

Adding Buttons

• ElevatedButton: Simple button with customizable style

  ElevatedButton(
    onPressed: () {
      // action
    },
    child: Text('Click Me'),
  )
  

• Customize button style with styleFrom:

  ElevatedButton.styleFrom(
    primary: Colors.green,
  )
  

Variables Handling in Buttons

• Change variables on button press using setState
• Example:

  setState(() {
    variable = newValue;
  });
  

Layout Management

SizedBox

• Adds space between widgets

  SizedBox(height: 50.0)
  

SingleChildScrollView

• Makes the screen scrollable for overflow content

  SingleChildScrollView(
    child: Column(
      children: [
        // widgets
      ]
    ),
  )
  

List.generate

• Dynamically create lists of widgets

  List.generate(3, (index) => Image.asset('images/image.png'))
  

Arrow Functions

• Short-hand for single-return functions

  (context) => Image.asset('images/image.png')
  

Row Widget

• Aligns widgets horizontally

  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ElevatedButton(
        onPressed: () {},
        child: Text('Button 1'),
      ),
      SizedBox(width: 20),
      ElevatedButton(
        onPressed: () {},
        child: Text('Button 2'),
      ),
    ],
  )
  

Navigation

Navigating to New Pages

• Use Navigator.push to navigate

  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => NewPage(),
    ),
  );
  

• Create new pages with separate Dart files
• Use Scaffold in new pages for structure
• Ensure Navigator.of(context).pop() to return to the previous page

Summary

• Covered Dart basics, null safety, creating Flutter apps, using various widgets (button, image, center, etc.), managing layouts (like scroll views, rows), and navigating between pages.
• Exercise: Implementing navigation and understanding alignment and layout widgets.
• Focus on practical examples and implementing learned concepts in real applications.