Flutter Basics by a REAL Project

Introduction

This tutorial will guide you through the basics of Flutter by implementing a design using various fundamental widgets. By the end of this guide, you will be familiar with creating a simple Flutter application, understanding widgets, and preparing for more advanced topics in Flutter development.

Step 1: Create Project

• Open your terminal or command prompt.
• Navigate to the directory where you want to create your project.
• Run the following command to create a new Flutter project:

  flutter create your_project_name
  

• Replace your_project_name with your desired project name.

Step 2: Main Function

• Open the lib/main.dart file in your project.
• Locate the main function, where the app starts.
• Ensure it looks like this:

  void main() {
    runApp(MyApp());
  }
  

Step 3: Run Application

• Use the terminal or your IDE's run command to start the application:

  flutter run
  

Step 4: Create Pages Folder

• In the lib folder, create a new folder named pages.
• This will help organize your project files.

Step 5: Create Home Page

• Inside the pages folder, create a new file called home_page.dart.
• Import the required material package at the top of the file:

  import 'package:flutter/material.dart';
  

Step 6: Stateless Widget vs Stateful Widget

• Understand the difference:
  • Stateless Widget: Immutable widgets that do not change.
  • Stateful Widget: Widgets that maintain state over time.

Step 7: Create Home Page Class

• Define a class for your home page:

  class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Home Page')),
        body: Center(child: Text('Welcome to Flutter')),
      );
    }
  }
  

Step 8: Remove Debug Banner

• To remove the debug banner, set debugShowCheckedModeBanner to false in the MaterialApp widget:

  MaterialApp(
    debugShowCheckedModeBanner: false,
  );
  

Step 9: Scaffold Widget

• Use the Scaffold widget as the primary layout structure for your app:
  • It provides an AppBar, Body, and other elements essential for material design.

Step 10: AppBar Widget

• Customize the AppBar by setting properties like title and background color:

  AppBar(
    title: Text('My App'),
    backgroundColor: Colors.blue,
  )
  

Step 11: Add Font to Project

• To add a custom font, include the font file in the assets folder and update pubspec.yaml:

  fonts:
    - family: YourFontFamily
      fonts:
        - asset: assets/YourFontFile.ttf
  

Step 12: Text Widget and Text Style

• Use the Text widget to display text and customize it with TextStyle:

  Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  )
  

Step 13: Change AppBar Background Color

• Set the AppBar's background color by modifying the backgroundColor property.

Step 14: Use SVG Package

• To use SVG icons, add the flutter_svg package to your pubspec.yaml:

  dependencies:
    flutter_svg: ^latest_version
  

• Import the package:

  import 'package:flutter_svg/flutter_svg.dart';
  

Step 15: Gesture Detector Widget

• Wrap widgets in a GestureDetector to handle touch events:

  GestureDetector(
    onTap: () {
      // Handle tap
    },
    child: Container(...),
  )
  

Step 16: Implement Categories Section

• Use a Column widget to arrange category items vertically.
• Utilize ListView.builder to create a scrollable list of categories dynamically.

Step 17: Create Model Class

• Define a model class for your category items:

  class Category {
    final String name;
    final String imageUrl;
  
    Category(this.name, this.imageUrl);
  }
  

Step 18: Implement LinearGradient

• To add a gradient background, use the BoxDecoration with LinearGradient:

  Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.red, Colors.blue],
      ),
    ),
  )
  

Conclusion

You have now learned the basics of Flutter by creating a simple application with various widgets. Key takeaways include understanding the structure of a Flutter app, using essential widgets, and implementing custom styles. As a next step, consider exploring more complex layouts and state management solutions in Flutter to enhance your applications further.