1. Home
  2. /
  3. Flutter
  4. /
  5. Dark/Light Theme Toggle

Dark/Light Theme Toggle - Flutter Typing CST Test

Loading…

Dark/Light Theme Toggle — Flutter Code

Toggles between light and dark themes using StatefulWidget.

import 'package:flutter/material.dart';

void main() => runApp(ThemeToggleApp());

class ThemeToggleApp extends StatefulWidget {
	@override
	_ThemeToggleAppState createState() => _ThemeToggleAppState();
}

class _ThemeToggleAppState extends State<ThemeToggleApp> {
	bool _isDark = false;

	void _toggleTheme() => setState(() => _isDark = !_isDark);

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			theme: _isDark ? ThemeData.dark() : ThemeData.light(),
			home: Scaffold(
				appBar: AppBar(title: Text('Theme Toggle')),
				body: Center(
					child: ElevatedButton(
						onPressed: _toggleTheme,
						child: Text(_isDark ? 'Switch to Light' : 'Switch to Dark'),
					),
				),
			),
		);
	}
}

Flutter Language Guide

Flutter is an open-source UI framework by Google for building cross-platform mobile, web, and desktop applications using a single Dart codebase, featuring a highly performant rendering engine and a rich set of customizable widgets.

Primary Use Cases

  • ▸Cross-platform mobile apps (iOS & Android)
  • ▸Web applications
  • ▸Desktop apps (macOS, Windows, Linux)
  • ▸Startup MVP development
  • ▸Enterprise internal tools
  • ▸Apps requiring advanced UI/animations
  • ▸Real-time dashboards and admin apps

Notable Features

  • ▸Single codebase for all platforms
  • ▸Hot reload and hot restart
  • ▸High-performance Skia rendering engine
  • ▸Rich built-in widget library
  • ▸Material & Cupertino components
  • ▸Dart AOT/JIT compilation
  • ▸Support for custom animations
  • ▸Strong ecosystem with Firebase

Origin & Creator

Created by Google; initial public release in 2017.

Industrial Note

Dominates fast cross-platform development for mobile-first startups, enterprise apps, fintech dashboards, e-commerce platforms, and apps requiring custom, fluid UI experiences across devices.

Quick Explain

  • ▸Flutter compiles to native ARM and x86 code for high performance.
  • ▸It uses its own rendering engine (Skia) to draw every pixel on screen, ensuring consistency across platforms.
  • ▸Flutter emphasizes widget-based architecture and reactive UI programming.

Core Features

  • ▸Widget-based UI system
  • ▸Declarative reactive framework
  • ▸Compiled native performance
  • ▸Platform channel integrations
  • ▸State management extensibility
  • ▸Open-source package ecosystem

Learning Path

  • ▸Dart language basics
  • ▸Flutter widgets and layouts
  • ▸Navigation and state management
  • ▸Backend/API integration
  • ▸Animations and rendering
  • ▸Advanced topics (Isolates, channels)

Practical Examples

  • ▸Login screen with Firebase Auth
  • ▸REST API CRUD app
  • ▸E-commerce UI with carts
  • ▸Animation-heavy onboarding screens
  • ▸Real-time chat application

Comparisons

  • ▸More performant UI than React Native
  • ▸More predictable rendering than native hybrids
  • ▸More flexible than low-code tools
  • ▸Larger binary size than pure native apps

Strengths

  • ▸Visually consistent UI across platforms
  • ▸Fast development with hot reload
  • ▸Performance close to native apps
  • ▸Massive widget and package ecosystem
  • ▸Clean architecture with widgets and states

Limitations

  • ▸App sizes can be slightly larger
  • ▸Newer ecosystem compared to native
  • ▸Heavy custom rendering requires optimization
  • ▸Some platform APIs require channel coding

When NOT to Use

  • ▸Apps needing extremely small binary sizes
  • ▸Heavy native hardware interactions
  • ▸Apps requiring platform-specific UI patterns exclusively
  • ▸Highly specialized native-only frameworks

Cheat Sheet

  • ▸Common widget syntax
  • ▸Navigation patterns
  • ▸setState vs Provider vs BLoC
  • ▸pubspec.yaml configuration rules

FAQ

  • ▸Why is Flutter so fast?
  • ▸Flutter is fast because it compiles to native code and uses its own rendering engine to draw widgets directly, eliminating the JavaScript bridge.
  • ▸Is Flutter good for beginners?
  • ▸Yes, Flutter is beginner-friendly due to its simple widget system, hot reload, and strong documentation.
  • ▸Does Flutter work for web?
  • ▸Yes, Flutter supports web with the same codebase, though performance varies depending on complexity.
  • ▸Is Flutter better than React Native?
  • ▸Flutter is generally more consistent and performant due to its rendering engine, while React Native relies on native components and bridges.

30-Day Skill Plan

  • ▸Week 1: Dart & basic widgets
  • ▸Week 2: Layouts & navigation
  • ▸Week 3: APIs & state management
  • ▸Week 4: Animations + deployment

Final Summary

  • ▸Flutter is a powerful cross-platform UI framework.
  • ▸Uses a single codebase for mobile, web, and desktop.
  • ▸Ideal for fast development with native-like performance.
  • ▸Backed by Google and thriving community support.

Project Structure

  • ▸lib/ -> Dart source files
  • ▸pubspec.yaml -> Dependencies
  • ▸android/ & ios/ -> Platform code
  • ▸assets/ -> Images, fonts
  • ▸main.dart -> App entry point

Monetization

  • ▸In-app purchases
  • ▸Subscriptions
  • ▸Ads (AdMob, Facebook Ads)
  • ▸Paid apps and Flutter templates

Productivity Tips

  • ▸Use snippets and templates
  • ▸Leverage hot reload efficiently
  • ▸Use DevTools for debugging
  • ▸Break UI into reusable widgets

Basic Concepts

  • ▸Widgets and widget tree
  • ▸Stateful vs stateless widgets
  • ▸Layouts and constraints
  • ▸Navigation and routing
  • ▸Asynchronous programming with Futures/Streams
  • ▸Package and plugin system

Official Docs

  • ▸flutter.dev documentation
  • ▸Dart.dev language docs
  • ▸Firebase Flutter docs

More Flutter Typing Exercises

Flutter Stateless WidgetFlutter Counter with Increment and DecrementFlutter Counter with ResetFlutter Simple StopwatchFlutter Counter with History

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher