How to Display a Country with Its Corresponding State with Flutter
flutter_country_state
A package for Flutter with a heart of gold. A customizable Flutter package that displays all countries with there respective state.
show some :heart: and star the repo to support the project.
Example
Please run the app in the Example folder
Installation
- add the dependency to your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
flutter_country_state:
You can also change the style of the text of list of the country and states
Use It
This will display the countries
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_country_state/flutter_country_state.dart';
class ShowCountry extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
child:Padding(
padding: EdgeInsets.symmetric(horizontal:20),
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Text('select country' ),
Text(Variables.country,
)
],
),
),
),
onTap: () {
showDialog(
context: context,
child: SimpleDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
elevation: 4,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: (){
//Redirect to the screen of your choice or pop out
},
child: Padding(
padding: EdgeInsets.only(right:18.0),
child: Material(
color:Colors.red,
child: Text('Done',
),
),
)
),
),
SingleChildScrollView(
child: Container(child: ShowMyDialog(
searchHint: 'Search country',
substringBackground: Colors.green,
textColors: Colors.black,
substringTextColor: Colors.white,
fontSize: 18,
substringFontSize: 14,
fontFamily: '',
fontStyle: FontStyle.normal,
))
)
],
)
);
}
),
}
}
This will display the states of the country selected
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_country_state/flutter_country_state.dart';
class ShowState extends StatefulWidget {
@override
_ShowStateState createState() => _ShowStateState();
}
class _ShowStateState extends State<ShowState> {
@override
Widget build(BuildContext context) {
return GestureDetector(
child:Padding(
padding: EdgeInsets.symmetric(horizontal:20),
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Text( 'select state',
),
Text( Variables.state,
),
],
)
),
),
onTap: (){
showDialog(
context: context,
builder: (context) => SimpleDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
elevation: 4,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: (){
//Redirect to the screen of your choice or pop out
},
child: Padding(
padding: EdgeInsets.only(right:18.0),
child: Material(
color:Colors.red,
child: Text('Done',
),
),
)
),
),
SingleChildScrollView(child: Container(child:StateDialog(
substringTextColor: Colors.white,
fontSize: 18,
textColors: Colors.black,
substringFontSize: 14,
fontFamily: '',
fontStyle: FontStyle.normal,
substringBackground: Colors.blueAccent,
),),)
],
)
);
}
),
}
}
Use this package as a library
Depend on it
Run this command:
With Dart:
$ dart pub add flutter_country_stateWith Flutter:
$ flutter pub add flutter_country_stateThis will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):
dependencies:
flutter_country_state: ^0.2.1
Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:flutter_country_state/flutter_country_state.dart';example/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_country_state/flutter_country_state.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter_country_states page',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'flutter_country_states page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({ required this.title});
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//ToDo: first import the package
GestureDetector(
child:Padding(
padding: EdgeInsets.symmetric(horizontal:20),
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Text('select country',
),
Text(Variables.country,
)
],
),
),
),
onTap: () {
showDialog(
context: context,
builder: (context) => SimpleDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
elevation: 4,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: (){
//Redirect to the screen of your choice or pop out
},
child: Padding(
padding: EdgeInsets.only(right:18.0),
child: Material(
color:Colors.red,
child: Text('Done',
),
),
)
),
),
SingleChildScrollView(
child: Container(child: ShowMyDialog(
searchHint: 'Search country',
substringBackground: Colors.green,
textColors: Colors.black,
substringTextColor: Colors.white,
fontSize: 18,
substringFontSize: 14,
fontFamily: '',
fontStyle: FontStyle.normal,
))
)
],
)
);
}
),
/*for states selected*/
GestureDetector(
child:Padding(
padding: EdgeInsets.symmetric(horizontal:20),
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Text( 'select state',
),
Text( Variables.state,
),
],
)
),
),
onTap: (){
showDialog(
context: context,
builder: (context) => SimpleDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
elevation: 4,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: (){
//Redirect to the screen of your choice or pop out
},
child: Padding(
padding: EdgeInsets.only(right:18.0),
child: Material(
color:Colors.red,
child: Text('Done',
),
),
)
),
),
SingleChildScrollView(child: Container(child:StateDialog(
substringTextColor: Colors.white,
fontSize: 18,
textColors: Colors.black,
substringFontSize: 14,
fontFamily: '',
fontStyle: FontStyle.normal,
substringBackground: Colors.blueAccent,
),),)
],
)
);
}
),
],
),
),
),
);
}
}Download Details:
Author: mimi-tech
Source Code: https://github.com/mimi-tech/flutter_country_state
9.10 GEEK