In this tutorial, we’ll create a simple Vowel Counter App in Flutter that counts the number of vowels in a given text. This app will help you get familiar with some basic concepts in Flutter such as state management, text input handling, and updating the UI dynamically.
Table of Contents
Step-by-Step Guide
Step 1: Setting Up for the Vowel Counter App in Flutter
Before we start, ensure that you have Flutter installed on your system. You can follow the official Flutter installation guide to get started.
Once Flutter is installed, you can create a new Flutter project by running the following command in your terminal:
flutter create vowel_counter
cd vowel_counter
Open the project in your favorite code editor, such as VS Code or Android Studio.
Step 2: Writing the Main Application
Let’s start by writing the main entry point of our Flutter application. Replace the content of lib/main.dart with the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Vowel Counter',
home: VowelCounterScreen(),
);
}
}
In this code, we’re defining a MyApp class that extends StatelessWidget. This class builds a MaterialApp with the title ‘Vowel Counter’ and sets VowelCounterScreen as the home screen.
Step 3: Creating the Vowel Counter App in Flutter
Next, we’ll create the main screen for our app. Add the following code to lib/main.dart:
class VowelCounterScreen extends StatefulWidget {
@override
_VowelCounterScreenState createState() => _VowelCounterScreenState();
}
class _VowelCounterScreenState extends State<VowelCounterScreen> {
final _controller = TextEditingController();
int _vowelCount = 0;
void _countVowels() {
setState(() {
String inputText = _controller.text.toLowerCase();
_vowelCount = inputText.replaceAll(RegExp(r'[^aeiou]'), '').length;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Vowel Counter'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Enter text',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _countVowels,
child: Text('Count Vowels'),
),
SizedBox(height: 20),
Text(
'Number of vowels: $_vowelCount',
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
In this code:
The _countVowels method is used to count the vowels in the input text. It converts the input text to lowercase, removes all non-vowel characters using a regular expression, and counts the remaining characters. The build method constructs the UI, which consists of a TextField for input, an ElevatedButton to trigger the vowel counting and a Text widget to display the count.
Step 4: Running the App
You can now run your app using the following command:
This will launch the app in the emulator or on a connected device. Enter some text in the input field, tap the “Count Vowels” button, and see the number of vowels below.
Full code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Vowel Counter',
home: VowelCounterScreen(),
);
}
}
class VowelCounterScreen extends StatefulWidget {
@override
_VowelCounterScreenState createState() => _VowelCounterScreenState();
}
class _VowelCounterScreenState extends State {
final _controller = TextEditingController();
int _vowelCount = 0;
void _countVowels() {
setState(() {
String inputText = _controller.text.toLowerCase();
_vowelCount = inputText.replaceAll(RegExp(r'[^aeiou]'), '').length;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Vowel Counter'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Enter text',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _countVowels,
child: Text('Count Vowels'),
),
SizedBox(height: 20),
Text(
'Number of vowels: $_vowelCount',
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}Output:
Also Read:
Conclusion
In this tutorial, we built a simple Flutter app to count the number of vowels in a given text. We covered the basics of state management, handling text input, and updating the UI dynamically. This is a great starting point for building more complex text-processing apps in Flutter.
