country flags all widgets

3 simple Flutter country flag widgets (one line of code)

Packages, Various /

In this post, I would like to show you 3 simple Flutter country flag widgets which will help you add a country flag to your project. I think most or maybe all of the plugins can be used with only one line of code. This also means you can probably break this line into a few more lines for better readability.

The list is not in any particular quality order but I sort that list with the newly added to pub.dev.

I also presume you know how to install new dependencies so I will only add the necessary code which will be used. The version of each plugin might change, so you may want to use the new version available to you.

The country code you can get from here.

Why use country flags in a Flutter project

There are several reasons why you might want to use country flags in a Flutter app or game:

  1. To represent the user’s country: You can use the flag to represent the user’s country of origin or residence. This can be useful for personalizing the app or game for the user.
  2. To represent a location: If your app or game involves locations, you can use flags to represent different countries or regions. This can help users easily identify the location and make the app or game more visually appealing.
  3. To represent language or culture: You can use flags to represent different languages or cultures in your app or game. This can be helpful for users who are learning about different cultures or are interested in language learning.
  4. To add visual interest: Flags can add visual interest and make your app or game more visually appealing. They can also help to break up large blocks of text or data and make the app or game easier to read and navigate.

Overall, using country flags in a Flutter app or game can help to personalize the experience for users, add visual interest, and make the app or game more engaging and immersive.

No.1. flutter_circle_flags_svg or Flutter Circle Flags SVG

The flutter_circle_flags_svg plugin was developed by Riajul Islam, and can be found on both pub.dev and GitHub. This particular project is a widget that allows you to easily add a circular representation of a country’s flag to your application. It only requires two parameters: the country code, and the desired size of the flag.

This simple yet useful tool can be a great way to add a touch of international flair to your app. So if you’re looking to add a country flag to your Flutter app, be sure to check out the flutter_circle_flags_svg plugin

flutter circle flags svg

But first, add the library to the dependencies and import the plugin to your dart file.

dependencies:
  flutter_circle_flags_svg: ^1.0.4
import 'package:flutter_circle_flags_svg/flutter_circle_flags_svg.dart';

How to use flutter_circle_flags_svg widget?

Because we will only use one line of code, the usage is effortless. Just add the CircleFlagSvg widget to your code, and specify the country code you need to display. You can also set the size of your flag. Below you can find examples. The third code sniped shows the CircleFlagSvg widget in a Row.

For example, to display the flag of the United States, you would include the following code:

CircleFlagSvg(code: 'us');
CircleFlagSvg(code: 'us', size: 60,),
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    // use a valid country code
    CircleFlag('us', size: 60,),
    CircleFlag('fr', size: 60,),
    CircleFlag('es', size: 60,),
    CircleFlag('ie', size: 60,),
  ].map((widget) => Padding(
    padding: const EdgeInsets.all(16),
    child: widget,
  )).toList(),
),

No.2. country_flags or Country Flags

The Country Flags plugin allows you to add a flag in 4:3 format. This plugin was created by Arturo Grau. The project can be found on pub.dev and GitHub.

country flags examples

Installation is required to add a plugin to dependencies and import it into your dart code.

dependencies:
  country_flags: ^1.0.0
import 'package:country_flags/country_flags.dart';

How to use country_flags widget in the Flutter project

As I mentioned it uses flags with a 4:3 ratio. The SVG size is 640×480. So the small flag can be 64×48. I needed to mention this because if you use the same width and height you might have an empty space above and below the flag.

country_flags parameters

  • country code: the key, uses the two letters country code
  • width: – uses double value, the width of the flag
  • height: – uses double value, the height of the flag
  • borderRadius: – uses double value – it is a radius of the flag corners
CountryFlags.flag('ie', width: 64, height: 48, borderRadius: 5,)

The width, height and border-radius values are not required but recommended because you need to specify the size of the flag. You can also wrap the flag with the SizedBox or Container with the width and height. The example below is not a one-line code but it could be and it is easier to read.

SizedBox(
  width: 64,
    height: 48,
    child: CountryFlags.flag('de')
),

The snippet below shows a row of flags with different parameters 

Container(
  color: Colors.grey,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      // use a valid country code
      CountryFlags.flag('ie', width: 64, height: 48, borderRadius: 10,),
      CountryFlags.flag('it', width: 64, height: 48),

      SizedBox(
          width: 64,
          height: 48,
          child: CountryFlags.flag('pl', borderRadius: 20,)
      ),

      Container(
        color: Colors.white,
          width: 64,
          height: 64,
          child: CountryFlags.flag('de', borderRadius: 20,)
      ),


    ].map((widget) => Padding(
      padding: const EdgeInsets.all(8),
      child: widget,
    )).toList(),
  ),
),

No.3. circle_flags or Circle Flags

Another country flag project was created by cedvdb. Here are the project pages on pub.dev and GitHub. The default size of the flags is 128×128.

circle flags example

How to use circle_flags widget in Flutter

As always, add the plugin to your dependencies and import it into your dart code. 

dependencies:
  circle_flags: ^0.0.3
import 'package:circle_flags/circle_flags.dart';

Then in your code, in the desired place add the CircleFlag widget. If you do not specify the size of the flag or you do not restrict the size with the SizedBox or Container the size will be 128×128 and at this moment cannot be bigger than this value. So if you use a bigger size, the flag might have empty space around it. 

CircleFlag('es'),
CircleFlag('es', size: 64),
SizedBox(width:60, child: CircleFlag('us')),

The code snippet below shows the flags in a row with different ways of usage. The fourth flag is presented on a white background to show how the different widths and heights affect the flag widget.

Container(
  color: Colors.grey,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      // use a valid country code
      CircleFlag('es'),
      CircleFlag('fr', size: 64,),

      SizedBox(
          width: 48,
          child: CircleFlag('it', size: 64,),
      ),

      Container(
        color: Colors.white,
          width: 48,
          height: 84,
          child: CircleFlag('ie'),
      ),

    ].map((widget) => Padding(
      padding: const EdgeInsets.all(8),
      child: widget,
    )).toList(),
  ),
),

Related Posts