flutter circle flags svg

How to create a Flutter SVG country flag in one line of code!

Packages, Various /

Sometimes we need to add a county flag to our project. The first thing to do would be to download the flag as png or SVG and use it in our code. It might involve adding the image into the assets folder and the file to pubspec.yaml. Then use it somewhere in your code.

What, if I tell you, this can add a Flutter SVG country flag with a simple plugin, as I said, one line of code?

This can be achieved with flutter_circle_flags_svg plugin created by Riajul Islam.

You can find this project on pub.dev and GitHub.

How to use Flutter SVG country flag

Install the flutter_circle_flags_svg plugin

First, add the flutter_circle_flags_svg into your dependencies in pubspec.yaml project file.

dependencies:
  flutter_circle_flags_svg: ^0.0.2

Then, you can use it in your Dart code.

import 'package:flutter_circle_flags_svg/flutter_circle_flags_svg.dart';

How to use flutter_circle_flags_svg in our code

As I mentioned, we use only one line of code. As code uses a valid country code such as ‘us’, ‘fr’, ‘es’, ‘ie’.

The country code you can get from here.

CircleFlagSvg(code: 'us');

At this moment we have only the option to change the flag size. Also, there is no option to change the flag to a square but as the plugin name suggests, it is the circle only. Is worth mentioning, this package contains 295 flags. Assets size under ~130KB (compressed).

CircleFlagSvg(code: 'us',size: 60,),

in the example below I used 4 flogs in a row.

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

As you can see I used a little piece of code to add padding to all children in a row. I mentioned this code in my other post here.

The full code is below.

import 'package:flutter/material.dart';
import 'package:flutter_circle_flags_svg/flutter_circle_flags_svg.dart';


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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutterassets.com'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            // use a valid country code
            CircleFlagSvg(code: 'us',size: 60,),
            CircleFlagSvg(code: 'fr',size: 60,),
            CircleFlagSvg(code: 'es',size: 60,),
            CircleFlagSvg(code: 'ie',size: 60,),
          ].map((widget) => Padding(
            padding: const EdgeInsets.all(16),
            child: widget,
          )).toList(),
        ),
      ),
    );
  }
}

Related Posts