max_country_picker 1.0.0+2 copy "max_country_picker: ^1.0.0+2" to clipboard
max_country_picker: ^1.0.0+2 copied to clipboard

Country picker with three icon mode Circle, Square, and Emoji, and also have two view mode Page and Modal Bottom Sheet.

example/lib/main.dart

import 'dart:developer';

import 'package:example/custom_text_field.dart';
import 'package:flutter/material.dart';
import 'package:max_country_picker/max_country_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var countryCode = 'ID';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Column(
                children: [
                  CustomTextField(
                    label: 'Default',
                    prefixWidget: MaxCountryPicker(
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                  CustomTextField(
                    label:
                        'Emoji mode with filtered country [US, ID, SG, MY, GB]',
                    prefixWidget: MaxCountryPicker(
                      flagMode: FlagMode.emoji,
                      viewMode: ViewMode.modal,
                      flagIconSize: 22,
                      initialCountryCode: countryCode,
                      countryListConfig: const CountryListConfig(
                          filterOnlyShowingCountry: [
                            'US',
                            'ID',
                            'SG',
                            'MY',
                            'GB'
                          ]),
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                  CustomTextField(
                    label: 'Page with customize',
                    prefixWidget: MaxCountryPicker(
                      flagMode: FlagMode.square,
                      viewMode: ViewMode.page,
                      flagIconSize: 22,
                      initialCountryCode: countryCode,
                      countryListConfig: CountryListConfig(
                        backgroundColor: Colors.grey[850],
                        searchBackgroundColor: Colors.grey[800],
                        countryCodeTextStyle: const TextStyle(
                            color: Colors.grey, fontWeight: FontWeight.w500),
                        countryNameTextStyle: const TextStyle(
                            color: Colors.white, fontWeight: FontWeight.w600),
                        appBarTitleTextStyle: const TextStyle(
                          color: Colors.white,
                        ),
                        appBarBackButtonColor: Colors.white,
                        searchIconColor: Colors.grey,
                        searchHintText: 'Search country',
                        searchHintTextStyle:
                            const TextStyle(fontSize: 14, color: Colors.grey),
                        searchTextStyle:
                            const TextStyle(fontSize: 16, color: Colors.white),

                        //
                      ),
                      onCanged: (country) {
                        log(country.code!);
                      },
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
4
likes
140
points
4
downloads

Documentation

API reference

Publisher

verified publishertothemax.dev

Weekly Downloads

Country picker with three icon mode Circle, Square, and Emoji, and also have two view mode Page and Modal Bottom Sheet.

Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

cupertino_icons, flutter, flutter_svg

More

Packages that depend on max_country_picker