Stateless Widget - Flutter Typing CST Test

Mode:

Duration:

Coding works best on desktop or with an external keyboard.

Stateless Widget — Flutter Code

Demonstrates Flutter widget lifecycle, state management, and UI composition.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
		title: 'Flutter Demo',
		theme: ThemeData(
			primarySwatch: Colors.blue,
			visualDensity: VisualDensity.adaptivePlatformDensity,
		),
		home: CounterScreen(),
		);
	}
}

class CounterScreen extends StatefulWidget {
	@override
	_CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
	int _counter = 0;
	List<String> _history = [];

	void _incrementCounter() {
		setState(() {
			_counter++;
			_history.add('Incremented to $_counter');
		});
	}

	void _decrementCounter() {
		setState(() {
			_counter--;
			_history.add('Decremented to $_counter');
		});
	}

	void _resetCounter() {
		setState(() {
			_counter = 0;
			_history.clear();
			_history.add('Counter reset');
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Flutter Counter'),
				backgroundColor: Theme.of(context).primaryColor,
			),
			body: Column(
				mainAxisAlignment: MainAxisAlignment.center,
				children: [
					Text(
						'Current Count:',
						style: Theme.of(context).textTheme.headlineSmall,
					),
					Text(
						'$_counter',
						style: Theme.of(context).textTheme.headlineLarge?.copyWith(
							color: Theme.of(context).primaryColor,
							fontWeight: FontWeight.bold,
						),
					),
					SizedBox(height: 20),
					Row(
						mainAxisAlignment: MainAxisAlignment.spaceEvenly,
						children: [
							FloatingActionButton(
								onPressed: _decrementCounter,
								tooltip: 'Decrement',
								child: Icon(Icons.remove),
								heroTag: 'decrement',
							),
							FloatingActionButton(
								onPressed: _resetCounter,
								tooltip: 'Reset',
								child: Icon(Icons.refresh),
								heroTag: 'reset',
							),
							FloatingActionButton(
								onPressed: _incrementCounter,
								tooltip: 'Increment',
								child: Icon(Icons.add),
								heroTag: 'increment',
							),
						],
					),
					SizedBox(height: 30),
					Expanded(
						child: Container(
							padding: EdgeInsets.all(16),
							child: Column(
								crossAxisAlignment: CrossAxisAlignment.start,
								children: [
									Text(
										'History:',
										style: Theme.of(context).textTheme.titleMedium,
									),
									Expanded(
										child: ListView.builder(
											itemCount: _history.length,
											itemBuilder: (context, index) {
												return ListTile(
													leading: Icon(Icons.history),
													title: Text(_history[index]),
													subtitle: Text('Action ${index + 1}'),
												);
											},
										),
									),
								],
							),
						),
					),
				],
			),
		);
	}
}

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 Counter with Increment and Decrement Flutter Dark/Light Theme Toggle Flutter Counter with Reset Flutter Simple Stopwatch Flutter Counter with History

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Stateless Widget — Flutter Code

Demonstrates Flutter widget lifecycle, state management, and UI composition.

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: CounterScreen(), ); } } class CounterScreen extends StatefulWidget { @override _CounterScreenState createState() => _CounterScreenState(); } class _CounterScreenState extends State<CounterScreen> { int _counter = 0; List<String> _history = []; void _incrementCounter() { setState(() { _counter++; _history.add('Incremented to $_counter'); }); } void _decrementCounter() { setState(() { _counter--; _history.add('Decremented to $_counter'); }); } void _resetCounter() { setState(() { _counter = 0; _history.clear(); _history.add('Counter reset'); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Counter'), backgroundColor: Theme.of(context).primaryColor, ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Current Count:', style: Theme.of(context).textTheme.headlineSmall, ), Text( '$_counter', style: Theme.of(context).textTheme.headlineLarge?.copyWith( color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold, ), ), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ FloatingActionButton( onPressed: _decrementCounter, tooltip: 'Decrement', child: Icon(Icons.remove), heroTag: 'decrement', ), FloatingActionButton( onPressed: _resetCounter, tooltip: 'Reset', child: Icon(Icons.refresh), heroTag: 'reset', ), FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), heroTag: 'increment', ), ], ), SizedBox(height: 30), Expanded( child: Container( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'History:', style: Theme.of(context).textTheme.titleMedium, ), Expanded( child: ListView.builder( itemCount: _history.length, itemBuilder: (context, index) { return ListTile( leading: Icon(Icons.history), title: Text(_history[index]), subtitle: Text('Action ${index + 1}'), ); }, ), ), ], ), ), ), ], ), ); } }

Flutter Language Guide

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.