intl_phone_number_input 0.7.5
intl_phone_number_input: ^0.7.5 copied to clipboard
A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber.
import 'package:flutter/material.dart';
import 'validation_example.dart';
import 'styling_example.dart';
import 'advanced_example.dart';
/// Main example app showcasing all the different examples
void main() => runApp(ExampleNavigatorApp());
class ExampleNavigatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Phone Number Input Examples',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: ExampleListPage(),
);
}
}
class ExampleListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Phone Number Input Examples'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Explore Different Features',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
'Tap on any example below to see the intl_phone_number_input package in action.',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[600],
),
),
SizedBox(height: 24),
Expanded(
child: ListView(
children: [
_buildExampleCard(
context,
icon: Icons.check_circle,
title: 'Validation Example',
description:
'Real-time validation, form integration, and error handling',
color: Colors.green,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ValidationExampleApp()),
),
),
SizedBox(height: 16),
_buildExampleCard(
context,
icon: Icons.palette,
title: 'Styling Example',
description:
'Custom themes, colors, borders, and flag displays',
color: Colors.purple,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StylingExampleApp()),
),
),
SizedBox(height: 16),
_buildExampleCard(
context,
icon: Icons.settings,
title: 'Advanced Example',
description:
'API usage, controllers, callbacks, and real-time features',
color: Colors.orange,
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdvancedExampleApp()),
),
),
],
),
),
SizedBox(height: 16),
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.info, color: Colors.blue),
SizedBox(width: 8),
Text(
'About this Package',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
SizedBox(height: 8),
Text(
'The intl_phone_number_input package provides a customizable phone number input widget with built-in validation, formatting, and country selection.',
),
SizedBox(height: 8),
Text(
'Package Version: 0.7.5',
style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
),
),
],
),
),
),
],
),
),
);
}
Widget _buildExampleCard(
BuildContext context, {
required IconData icon,
required String title,
required String description,
required Color color,
required VoidCallback onTap,
}) {
return Card(
elevation: 2,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
children: [
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
color: color,
size: 24,
),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
SizedBox(height: 4),
Text(
description,
style: TextStyle(
color: Colors.grey[600],
fontSize: 14,
),
),
],
),
),
Icon(
Icons.arrow_forward_ios,
size: 16,
color: Colors.grey[400],
),
],
),
),
),
);
}
}