2. Develop an application using Flutter to Increment and Decrement Numbers (Counter App).
Step to Run
- Open your Flutter project in VS Code.
- Open
lib/main.dart. - Delete the existing code.
- Paste the program code given below.
- Save the file.
- Run the program using
flutter runcmd
PROGRAM:
import 'package:flutter/material.dart';
void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Lab Program 2',
debugShowCheckedModeBanner: false,
home: const CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
const CounterScreen({super.key});
@override
State<CounterScreen> createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
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: const Text('Program 2: Counter App'),
centerTitle: true,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Counter Value',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Text(
'$counter',
style: const TextStyle(
fontSize: 60,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
const SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: decrementCounter,
child: const Text('Decrement'),
),
const SizedBox(width: 20),
ElevatedButton(
onPressed: incrementCounter,
child: const Text('Increment'),
),
],
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: resetCounter,
child: const Text('Reset'),
),
],
),
),
);
}
}OUTPUT:
