Flutter UI | 04 | Counter UI | Text, FloatingActionButton, Timer, CustomPaint, Image

 Here is the video tutorial

Code

main.dart

	import 'package:counter_app/splashScreen.dart'; import 'package:flutter/material.dart';
	void main() {
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'Flutter Demo',
	theme: ThemeData(
	primaryColor: Color(0xFFC41A3B),
	primaryColorLight: Color(0xFFFBE0E6),
	accentColor: Color(0xFF1B1F32),
	),
	home: SplashScreen(),
	);
	}
	}

splasScreen.dart

	import 'dart:async'; import 'package:counter_app/home.dart';
	import 'package:counter_app/images.dart';
	import 'package:flutter/material.dart';
	class SplashScreen extends StatefulWidget {
	SplashScreen({Key key}) : super(key: key);
	@override
	_SplashScreenState createState() => _SplashScreenState();
	}
	class _SplashScreenState extends State<SplashScreen> {
	@override
	void initState() {
	super.initState();
	Timer(
	Duration(seconds: 2),
	() => Navigator.push(
	context,
	MaterialPageRoute(
	builder: (context) => MyHomePage(),
	),
	),
	);
	}
	@override
	Widget build(BuildContext context) {
	return CustomPaint(
	child: Center(
	child: Container(
	child: Image(
	image: AssetImage(logo),
	height: 125.0,
	),
	),
	),
	painter: SplashPaint(),
	);
	}
	}
	class SplashPaint extends CustomPainter {
	@override
	void paint(Canvas canvas, Size size) {
	final paint = Paint();
	paint.color = Color(0xFF1B1F32);
	var rect = Rect.fromLTWH(0, 0, size.width, size.height);
	canvas.drawRect(rect, paint);
	paint.color = Color(0xFFC41A3B);
	var path = Path();
	path.lineTo(0, size.height);
	path.lineTo(size.width, 0);
	path.close();
	canvas.drawPath(path, paint);
	paint.color = Color(0xFFFBE0E6);
	var center = Offset(size.width / 2, size.height / 2);
	canvas.drawCircle(center, 75.0, paint);
	}
	@override
	bool shouldRepaint(CustomPainter oldDelegate) => false;
	}

home.dart

	import 'package:flutter/material.dart';
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	String title = 'Counter';
	int _counter = 0;
	void _incrementCounter() {
	setState(() {
	_counter++;
	});
	}
	void _decrementCounter() {
	setState(() {
	_counter--;
	});
	}
	void _resetCounter() {
	setState(() {
	_counter = 0;
	});
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text(title),
	centerTitle: true,
	automaticallyImplyLeading: false,
	),
	body: Center(
	child: Container(
	height: 200.0,
	width: 200.0,
	padding: EdgeInsets.only(top: 50.0),
	decoration: BoxDecoration(
	border: Border.all(
	color: Color(0xFFC41A3B),
	width: 5.0,
	),
	borderRadius: BorderRadius.circular(100.0),
	),
	child: Text(
	'$_counter',
	textAlign: TextAlign.center,
	style: TextStyle(fontSize: 80.0, fontWeight: FontWeight.bold),
	),
	),
	),
	floatingActionButton: Column(
	mainAxisAlignment: MainAxisAlignment.end,
	children: <Widget>[
	Padding(
	padding: const EdgeInsets.all(8.0),
	child: FloatingActionButton(
	onPressed: _resetCounter,
	backgroundColor: Color(0xFFC41A3B),
	tooltip: 'Reset',
	heroTag: 'Reset',
	child: Icon(
	Icons.refresh,
	size: 28.0,
	),
	),
	),
	Padding(
	padding: const EdgeInsets.all(8.0),
	child: FloatingActionButton(
	onPressed: _decrementCounter,
	backgroundColor: Color(0xFFC41A3B),
	tooltip: 'Decrement',
	heroTag: 'Decrement',
	child: Icon(
	Icons.remove,
	size: 28.0,
	),
	),
	),
	Padding(
	padding: const EdgeInsets.all(8.0),
	child: FloatingActionButton(
	onPressed: _incrementCounter,
	backgroundColor: Color(0xFFC41A3B),
	tooltip: 'Increment',
	heroTag: 'Increment',
	child: Icon(
	Icons.add,
	size: 28.0,
	),
	),
	),
	],
	),
	);
	}
	}