Dark/Light Theme Toggle - Flutter Typing CST Test

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.

More Flutter Typing Exercises

Practice Other Languages