Quizzes & Exercises

Test your knowledge and practice your Flutter skills

📊 Overall Progress

Complete all 50 quizzes across 5 batches to master Flutter development!

0 of 50 completed (0%)

Batch 1: Basic Flutter Concepts

Questions 1-10

Flutter setup, widgets, hot reload fundamentals

Batch Progress: 0/10 completed

Batch 1 of 5

0/10 questions completed in this batch

Flutter Coding Exercises

Practice your Flutter skills with these comprehensive coding exercises. Each exercise focuses on different aspects of Flutter development. Try to solve them on your own before looking at the solutions.

🎨 UI & Widgets

Exercises 1-3

⚡ State & Logic

Exercises 4-6

🚀 Advanced

Exercises 7-10

Exercise 1: Create a Custom Button

Practice creating custom widgets with styling and interactions

Task:

Create a custom button widget with rounded corners, a gradient background, shadow, and ripple effect.

Starter Code:

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color? primaryColor;
  final Color? secondaryColor;

  const CustomButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.primaryColor,
    this.secondaryColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: Implement the custom button with:
    // - Gradient background
    // - Rounded corners
    // - Shadow effect
    // - Ripple animation on tap
    return Container();
  }
}

Exercise 2: Build a Profile Card

Create a reusable profile card component with image, text, and actions

Task:

Build a profile card that displays user information with avatar, name, bio, and action buttons.

Starter Code:

import 'package:flutter/material.dart';

class ProfileCard extends StatelessWidget {
  final String name;
  final String bio;
  final String avatarUrl;
  final VoidCallback? onFollow;
  final VoidCallback? onMessage;

  const ProfileCard({
    Key? key,
    required this.name,
    required this.bio,
    required this.avatarUrl,
    this.onFollow,
    this.onMessage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: Create a profile card with:
    // - Circular avatar image
    // - Name and bio text
    // - Follow and Message buttons
    // - Card styling with elevation
    return Container();
  }
}

Exercise 3: Create a Custom App Bar

Build a custom app bar with gradient background and custom actions

Task:

Create a custom app bar widget with gradient background, custom title styling, and action buttons.

Starter Code:

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final List<Widget>? actions;
  final Widget? leading;
  final bool centerTitle;

  const CustomAppBar({
    Key? key,
    required this.title,
    this.actions,
    this.leading,
    this.centerTitle = true,
  }) : super(key: key);

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    // TODO: Create a custom app bar with:
    // - Gradient background
    // - Custom title styling
    // - Support for actions and leading widget
    // - Proper elevation and shadows
    return Container();
  }
}

Exercise 4: Counter App with Multiple Counters

Practice state management with multiple independent counters

Task:

Create a counter app that allows users to add multiple counters, each with independent increment/decrement functionality.

Starter Code:

import 'package:flutter/material.dart';

class MultiCounterApp extends StatefulWidget {
  const MultiCounterApp({Key? key}) : super(key: key);

  @override
  _MultiCounterAppState createState() => _MultiCounterAppState();
}

class _MultiCounterAppState extends State<MultiCounterApp> {
  // TODO: Add state variables for managing multiple counters
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Multi Counter')),
      body: Column(
        children: [
          // TODO: Add button to create new counter
          // TODO: Display list of counters
        ],
      ),
    );
  }
  
  // TODO: Add methods for:
  // - Adding new counter
  // - Incrementing specific counter
  // - Decrementing specific counter
  // - Removing counter
}

Exercise 5: Shopping Cart with Local State

Build a shopping cart with add/remove items and total calculation

Task:

Create a shopping cart that allows adding items, changing quantities, and calculating totals.

Starter Code:

import 'package:flutter/material.dart';

class Product {
  final String id;
  final String name;
  final double price;
  
  Product({required this.id, required this.name, required this.price});
}

class CartItem {
  final Product product;
  int quantity;
  
  CartItem({required this.product, this.quantity = 1});
}

class ShoppingCart extends StatefulWidget {
  const ShoppingCart({Key? key}) : super(key: key);

  @override
  _ShoppingCartState createState() => _ShoppingCartState();
}

class _ShoppingCartState extends State<ShoppingCart> {
  List<CartItem> cartItems = [];
  
  final List<Product> availableProducts = [
    Product(id: '1', name: 'iPhone 14', price: 999.99),
    Product(id: '2', name: 'MacBook Pro', price: 1999.99),
    Product(id: '3', name: 'AirPods', price: 179.99),
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: Build the shopping cart UI with:
    // - List of available products
    // - Add to cart functionality
    // - Cart items with quantity controls
    // - Total price calculation
    return Scaffold();
  }
  
  // TODO: Implement methods for:
  // - Adding items to cart
  // - Updating item quantities
  // - Removing items from cart
  // - Calculating total price
}

Exercise 6: Form Validation

Create a registration form with comprehensive validation

Task:

Build a user registration form with email, password, and confirm password validation.

Starter Code:

import 'package:flutter/material.dart';

class RegistrationForm extends StatefulWidget {
  const RegistrationForm({Key? key}) : super(key: key);

  @override
  _RegistrationFormState createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  final _formKey = GlobalKey<FormState>();
  
  // TODO: Add controllers for form fields
  // TODO: Add variables for form validation state

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Registration')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // TODO: Add form fields for:
              // - Email (with email validation)
              // - Password (with strength requirements)
              // - Confirm Password (must match password)
              // - Submit button
            ],
          ),
        ),
      ),
    );
  }
  
  // TODO: Add validation methods
  // TODO: Add form submission handler
}

Exercise 7: HTTP API Integration

Fetch and display data from a REST API with error handling

Task:

Create a screen that fetches user data from JSONPlaceholder API and displays it in a list.

Starter Code:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class User {
  final int id;
  final String name;
  final String email;
  final String phone;
  
  User({
    required this.id,
    required this.name,
    required this.email,
    required this.phone,
  });
  
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
      phone: json['phone'],
    );
  }
}

class UserListScreen extends StatefulWidget {
  const UserListScreen({Key? key}) : super(key: key);

  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  // TODO: Add state variables for:
  // - List of users
  // - Loading state
  // - Error state

  @override
  void initState() {
    super.initState();
    // TODO: Fetch users when screen loads
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Users')),
      body: Container(), // TODO: Implement UI based on state
    );
  }
  
  // TODO: Implement fetchUsers method with error handling
}

Exercise 8: Custom Animation

Create a custom loading animation using AnimationController

Task:

Build a custom loading spinner with rotating and scaling animations.

Starter Code:

import 'package:flutter/material.dart';

class CustomLoadingAnimation extends StatefulWidget {
  final double size;
  final Color color;
  
  const CustomLoadingAnimation({
    Key? key,
    this.size = 50.0,
    this.color = Colors.blue,
  }) : super(key: key);

  @override
  _CustomLoadingAnimationState createState() => _CustomLoadingAnimationState();
}

class _CustomLoadingAnimationState extends State<CustomLoadingAnimation>
    with TickerProviderStateMixin {
  
  // TODO: Add AnimationController and Animation variables
  
  @override
  void initState() {
    super.initState();
    // TODO: Initialize animations
  }

  @override
  void dispose() {
    // TODO: Dispose animation controllers
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: Build animated widget with rotation and scaling
    return Container();
  }
}

Exercise 9: Local Storage with SharedPreferences

Implement persistent settings using SharedPreferences

Task:

Create a settings screen that saves user preferences locally and persists across app restarts.

Starter Code:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SettingsScreen extends StatefulWidget {
  const SettingsScreen({Key? key}) : super(key: key);

  @override
  _SettingsScreenState createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  // TODO: Add variables for settings
  // - Dark mode toggle
  // - Notifications enabled
  // - Username
  // - Font size slider

  @override
  void initState() {
    super.initState();
    // TODO: Load saved settings
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // TODO: Add settings UI controls
          ],
        ),
      ),
    );
  }
  
  // TODO: Implement methods to:
  // - Load settings from SharedPreferences
  // - Save settings to SharedPreferences
}

Exercise 10: Advanced Todo App with Categories

Build a comprehensive todo app with categories, priorities, and persistence

Task:

Create an advanced todo application with task categories, priority levels, due dates, and local storage.

Starter Code:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

enum TaskPriority { low, medium, high }
enum TaskCategory { work, personal, shopping, health }

class Task {
  final String id;
  String title;
  String description;
  bool isCompleted;
  TaskPriority priority;
  TaskCategory category;
  DateTime? dueDate;
  DateTime createdAt;

  Task({
    required this.id,
    required this.title,
    this.description = '',
    this.isCompleted = false,
    this.priority = TaskPriority.medium,
    this.category = TaskCategory.personal,
    this.dueDate,
    DateTime? createdAt,
  }) : createdAt = createdAt ?? DateTime.now();

  // TODO: Add toJson and fromJson methods for persistence
}

class AdvancedTodoApp extends StatefulWidget {
  const AdvancedTodoApp({Key? key}) : super(key: key);

  @override
  _AdvancedTodoAppState createState() => _AdvancedTodoAppState();
}

class _AdvancedTodoAppState extends State<AdvancedTodoApp> {
  List<Task> tasks = [];
  TaskCategory? selectedCategory;
  TaskPriority? selectedPriority;

  @override
  void initState() {
    super.initState();
    // TODO: Load tasks from storage
  }

  @override
  Widget build(BuildContext context) {
    // TODO: Build comprehensive todo app UI with:
    // - Add task form with all fields
    // - Task list with filtering
    // - Category and priority filters
    // - Task editing capabilities
    // - Persistence
    return Scaffold();
  }
  
  // TODO: Implement methods for:
  // - Adding tasks
  // - Editing tasks
  // - Deleting tasks
  // - Filtering tasks
  // - Saving/loading from storage
}