Flutter – How to Get Instagram Username Data

Flutter is a cross-platform application development toolkit developed and maintained by Google. Flutter redefines cross-platform app development by combining great design with superb capabilities. Flutter was released to the public in 2017, and since then many large corporations have shifted towards Flutter to supercharge their app development process. In this app we are going to have the features or modules mentioned below:

• A simple screen with some Text Widgets and a CircularAvatar.
• flutter_insta package to get the Instagram data of the desired user.
• A simple layout using a Column Widget.
• A TextField Widget to enter username.

A sample video is given below to get an idea about what we are going to do in this article.

Developing this app will give you a good revision of the basics of dart and flutter. As we are covering concepts such as:

• Widgets like Text, TextField, CircularAvatar, Button, Container, etc.
• Using external packages in Flutter.
• Basic state management using setState.

In this application, we will have the main.dart file in the lib folder that will contain all the code. Add the flutter_insta package to the project before running the app. Run the below command from the root of your project to add the package.

flutter pub add flutter_insta

Code:

Create a new flutter application and delete all the boilerplate code and type the below code in the main.dart file. Your can refer this article if you want to know how to create a new flutter application.

Dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Instagram Profile Fetcher',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const InstagramProfile(),
    );
  }
}

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

  @override
  createState() => _InstagramProfileState();
}

class _InstagramProfileState extends State<InstagramProfile> {
  FlutterInsta flutterInsta = FlutterInsta();
  String username = "";
  String? followers = "0";
  String following = "0";
  String profilePic = "";
  String userNameDisplay = "";

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

  fetchData() async {
    try {
      await flutterInsta.getProfileData(username);
      setState(() {
        followers = flutterInsta.followers;
        following = flutterInsta.following;
        profilePic = flutterInsta.imgurl;
        userNameDisplay = flutterInsta.username;
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GFG - Instagram Profile Data')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  username = value;
                });
              },
              decoration: const InputDecoration(labelText: 'Enter Instagram Username'),
            ),
            ElevatedButton(
              onPressed: () async {
                await fetchData();
              },
              child: const Text('Fetch Data'),
            ),
            const SizedBox(height: 20),
            profilePic == ""
                ? const Icon(
                    Icons.person_2_outlined,
                    size: 40,
                  )
                : CircleAvatar(
                    backgroundImage: NetworkImage(profilePic),
                    radius: 50,
                  ),
            const SizedBox(height: 20),
            Text(
              userNameDisplay,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(
                  'Followers: $followers',
                  style: const TextStyle(fontSize: 20),
                ),
                Text(
                  'Following: $following',
                  style: const TextStyle(fontSize: 20),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Output:

Finally, the apk for the app can be generated by running the command ‘flutter build apk’ in the terminal.