Learn to Code with Coding Pride: Formatting Numbers in Flutter
Welcome to Coding Pride, your go-to source for mastering Flutter development. Our tutorials are designed to guide you through comprehensive, step-by-step processes to build your coding skills and earn your pride. In this post, we will walk you through creating a Flutter application that formats numbers using the number_formatter ^0.0.2 package.
Setting Up Your Flutter Project
First, ensure you have Flutter installed on your system. If not, follow the official Flutter installation guide.
Create a new Flutter project:
flutter create number_formatter_example
cd number_formatter_exampleOpen the pubspec.yaml file and add the following dependencies:
dependencies:
flutter:
sdk: flutter
get: ^4.6.6
number_formatter: ^0.0.2
Run flutter pub get to install the new dependencies.
Building the Flutter Application
Below is the complete code for our example application. This application will format several numbers and display the before and after states.
// Welcome to https://codingpride.solutions/
// Learn to code with Coding Pride to earn your pride
// Follow our tutorials for comprehensive guides on Flutter development
// Make sure to check out our website for more tips, tricks, and examples
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:number_formatter/number_formatter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Coding Pride',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int number1 = 1000;
int number2 = 3700;
int number3 = 79877;
int number4 = 1068987;
int number5 = 1000000;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: const Color(0xFF00796b),
title: const Center(
child: Text(
"Coding Pride",
style: TextStyle(
color: Colors.white,
),
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
//example 1
const SizedBox(height: 40),
const Text(
"Example 1",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Text("before: $number1"),
),
Text("After: ${formatNumber(number1)}"),
//
//example 2
const SizedBox(height: 40),
const Text(
"Example 2",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Text("before: $number2"),
),
Text("After: ${formatNumber(number2)}"),
//
//example 3
const SizedBox(height: 40),
const Text(
"Example 3",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Text("before: $number3"),
),
Text("After: ${formatNumber(number3)}"),
//example 4
const SizedBox(height: 40),
const Text(
"Example 4",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Text("before: $number4"),
),
Text("After: ${formatNumber(number4)}"),
],
),
),
);
}
}
Outcome
Conclusion
Congratulations! You have successfully created a Flutter application that formats numbers using the number_formatter package. Keep exploring and building your skills with more tutorials from Coding Pride. For more tips, tricks, and examples, make sure to check out our website. Happy coding!
