DEV Community: David Adewoyin

How to Build a Flutter App with GraphQL

David Adewoyin — Fri, 19 Nov 2021 08:53:14 +0000

What are we building?

We will be building a flutter app that fetches a list of countries using the Countries GraphQL API and displays brief information about the country.

Prerequisite.

This article assumes the user is familiar with Flutter and have a basic understanding of GraphQL.

Countries GraphQL API

The Countries GraphQL API is a public GraphQL API for getting information about countries, continents, and languages. To understand how a given GraphQL API works, It is best to first interact with the endpoint using a test playground which enables you to run test queries, for this tutorial a playground for interacting with countries api can be found here .

Example of a running a query in the playground.

How to use GraphQL with flutter

To use GraphQL with flutter, we use the graphql package, which provides the most popular GraphQL client for dart.

Creating the country directory app

We create a new flutter project called country_directory

flutter create country_directory

and add the graphql package as a dependency in the pubspec.yaml file

dependencies:
  graphql: ^5.0.0

Basic Usage

To connect to a GraphQL Server, we first need to create a GraphQLClient. A GraphQLClient requires both a cache and a link to be initialized.

Creating a file called** api.dart** to define our apis, we add the following lines of code which set the URL of the GraphQL endpoint and create an instance of the GraphQLClient needed to interact with the endpoint. HttpLink is used to customize the network access such as adding access token for authentication but since the countries apis is free authentication is not needed.

import 'package:graphql/client.dart';


const baseURL = "https://countries.trevorblades.com/";

final _httpLink = HttpLink(
  baseURL,
);

final GraphQLClient client = GraphQLClient(
  link: _httpLink,
  cache: GraphQLCache(),
);

Testing Query with the Playground

Our application consists of initially making a request to the endpoint in other to fetch a list of country name and their country code from the API and providing a dropdown that enables the user to choose a country in which another query will be sent to the endpoint in other to fetch details of the country.
The initial query sent to the endpoint is shown below;

query {
  countries {
    code
    name
 }

And the endpoint returns a response which contains a list of countries with the country code and name which part is shown below.

"data": {
    "countries": [
      {
        "code": "AD",
        "name": "Andorra"
      },
      {
        "code": "AE",
        "name": "United Arab Emirates"
      },
      {
        "code": "AF",
        "name": "Afghanistan"
      },

]
}

The next step is to make a query request to the endpoint for retrieving the data of a particular country. The example below shows querying the endpoint for data about Nigeria with the country code of "NG"

query {
  country(code:"NG"){
     name
    capital
    code
    native
    currency
    phone
    emoji
    }
}

Response returned from the GraphQL endpoint:


  "data": {
    "country": {
      "name": "Nigeria",
      "capital": "Abuja",
      "code": "NG",
      "native": "Nigeria",
      "currency": "NGN",
      "phone": "234",
      "emoji": "🇳🇬"
    }
  }
}

Examining the responses from the two queries.We create a new file model.dart and create a class in the file called Country with the following content.

class Country {
  String code;
  String name;
  String? capital;
  String? currency;
  String? native;
  String? phone;
  String? emoji;

  Country.fromJson(Map<String, dynamic> json)
      : code = json["code"],
        name = json["name"],
        capital = json["capital"],
        currency = json["currency"],
        native = json["native"],
        phone = json["phone"],
        emoji = json["emoji"];
}

Notice apart from the code and name field in the country class all other fields are nullable since the first request to the endpoint only returns the country code and name which is needed to create a country instance.We also create a factory method for easily creating an instance of the country from the json response.

In the api.dart file we create two constant that represent the two queries string to be sent to the GraphQL endpoint.

const _getAllCountries = r'''
query {
  countries{
    code
    name
    }
  }
''';

// parameters to be supplied to the query is firstly defined in the query head with the datatype, since we need to supply the country code in other to fetch details of a particular country we add the code parameter with the ID datatype as shown below

const _getCountry = r'''
query getCountry($code:ID!){
  country(code:$code){
    name
    capital
    code
    native
    currency
    phone
    emoji

  }
}

''';

Fetching the list of countries

import the country model we earlier created as we will be using it to store the details of the country we get as the responses from the api

``import 'package:country_directory/model.dart';
We create a function getAllCountries which returns a list of countries as shown below:
//returns a list of countries names with the country code



Future<List<Country>> getAllCountries() async {
  var result = await client.query(
    QueryOptions(
//gql is used to parse the _getAllCountries string constant we previously created into a format or document that the GraphQL client understand. 
      document: gql(_getAllCountries),
    ),
  );

  var json = result.data!["countries"];
  List<Country> countries = [];
  for (var res in json) {
    var country = Country.fromJson(res);
    countries.add(country);
  }
  return countries;
}

We also create a second function for returning the data associated with a particular country. The function takes in a a country code and use that to fetch the country data.



// returns a country with the given country code
Future<Country> getCountry(String code) async {
  var result = await client.query(
    QueryOptions(
      document: gql(_getCountry),
      variables: {
        "code": code,
      },
    ),
  );

  var json = result.data!["country"];


  var country = Country.fromJson(json);
  return country;
}

Creating the view

Importing the the two files we created in the main.dart



import 'package:country_directory/api.dart';
import 'package:country_directory/model.dart';

we create a stateful widget called HomePage in the main.dart file which we contains the view of our program
We add the following lines of code to our main.dart.




class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Country> countries = [];
  Country? selectedCountry;
// the future is set to getAllCountries since we need to initially get the list of all countries first.
  Future<List<Country>> future = getAllCountries();

}

Since we will be using a dropdown to select a country, we create a function for building the items of the dropdown



List<DropdownMenuItem<Country>> buildDropDownItem(List<Country> countries) {
    return countries
        .map((country) => DropdownMenuItem<Country>(
              child: Text(country.name),
              value: country,
            ))
        .toList();
  }

We also create a pickCountriesWidget function for picking a particular country from the list of country




  Widget pickCountriesWidget(
      BuildContext context, AsyncSnapshot<List<Country>> snapshot) {
    var countries = snapshot.data;

    if (snapshot.connectionState == ConnectionState.done) {
      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: DropdownButtonFormField(
          decoration: const InputDecoration(
            labelText: "Choose Country",
            border: OutlineInputBorder(),
          ),
          items: buildDropDownItem(countries!),
          value: selectedCountry,
          onChanged: (Country? country) {
            setState(() {
              selectedCountry = country;
            });
          },
        ),
      );
    }
    return const Center(
      child: CircularProgressIndicator(),
    );

When a country is selected from the dropdown we make sent a query to the api for fetching the details of the country.

The following lines create a widget for displaying the details of the country.



Widget countryDetailsWidget(BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Padding(
        padding: EdgeInsets.only(top: 20),
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
    if (snapshot.hasError) {
      return const Center(
        child: Text("Unable to fetch country data"),
      );
    }
    Country country = snapshot.data;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Text(
            "Country Info",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        const SizedBox(height: 10),
        Card(
          color: Colors.grey.shade50,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            child: Row(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text("Name"),
                    Text("Capital"),
                    Text("Country code"),
                    Text("Native"),
                    Text("Currency"),
                    Text("Phone Code"),
                    Text("Emoji"),
                  ],
                ),
                const Spacer(flex: 3),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(": ${country.name}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.capital}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.code}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.native}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.currency}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.phone!}",
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(": ${country.emoji}",
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                        )),
                  ],
                ),
                const Spacer(),
              ],
            ),
          ),
        ),
      ],
    );
  }

Putting everything together in the build method



 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.black,
        title: const Text("Country Directory"),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: ListView(
          children: [
            const SizedBox(height: 50),
            FutureBuilder<List<Country>>(
              future: future,
              builder: (context, snapshot) {
                return pickCountriesWidget(context, snapshot);
              },
            ),
            const SizedBox(height: 20),
            if (selectedCountry != null)
              FutureBuilder<Country>(
                future: getCountry(selectedCountry!.code),
                builder: (context, snapshot) {
                  return countryDetailsWidget(context, snapshot);
                },
              ),
          ],
        ),
      ),
    );
  }

The link to the application is at github . The article shows how to integrate GraphQL with flutter.Further articles will shows how to do mutations and subscriptions but the fundamentals of operation is the same.

Top 10 Rust Cargo Commands

David Adewoyin — Mon, 15 Nov 2021 20:57:35 +0000

Cargo is the Rust package manager, and is a powerful tool that can make programming in Rust quite a delight.It provides various commands that can be used in your daily programming. The list of commands that Cargo supports can be extended through Rust crates written by the community.

The array of commands makes Cargo a versatile tool worth knowing for any Rust developer.

This article provides a list of helpful Cargo commands worth knowing and using.

Top Cargo Commands to Know

1. `cargo install [options] crate...` :

cargo install is used for building and installing a Rust binary. There are multiple sources from which a crate can be installed. The default location is crates.io but the --git , --path, and --registry flags can be set to change the source.
Example of using cargo install is cargo install sqlx which install the sqlx crate from crates.io.

2. `cargo uninstall [options] [spec...]`:

As the name suggest this command removes a package installed with cargo-install.

3. `cargo tree [options]`:

cargo tree will display a tree of dependencies to the terminal. An example of a simple project that depends on the "rand" package:

myproject v0.1.0 (/myproject)
└── rand v0.7.3
    ├── getrandom v0.1.14
    │   ├── cfg-if v0.1.10
    │   └── libc v0.2.68
    ├── libc v0.2.68 (*)
    ├── rand_chacha v0.2.2
    │   ├── ppv-lite86 v0.2.6
    │   └── rand_core v0.5.1
    │       └── getrandom v0.1.14 (*)
    └── rand_core v0.5.1 (*)
[build-dependencies]
└── cc v1.0.50

4. `cargo search [options] [query...]`:

This performs a textual search for crates on crates.io. The matching crates will be displayed along with their description in TOML format suitable for copying into a Cargo.toml manifest.
Example of using cargo search is : cargo search serde which returns a list of crate with textual search marching serde and a description which include their version number.

serde = "1.0.130"                         # A generic serialization/deserialization framework
discord_typed_interactions = "0.1.0"      # suppose you're working with discord slash commands and you want statically typed requ…
serde_json_experimental = "1.0.29-rc1"    # A JSON serialization file format
alt_serde_json = "1.0.61"                 # A JSON serialization file format
serde_json = "1.0.70"                     # A JSON serialization file format
serde_partiql = "1.1.65"                  # A PartiQL data model serialization file format
cargo-geiger = "0.11.1"                   # Detects usage of unsafe Rust in a Rust crate and its dependencies.
serde-encrypt = "0.6.0"                   # Encrypts all the Serialize
serde-encrypt-core = "0.6.0"              # Encrypts all the Serialize
typescript-definitions = "0.1.10"         # serde support for exporting Typescript definitions
... and 2787 crates more (use --limit N to see more)

5. `cargo edit` :

This tool extends Cargo to allow you to add, remove, and upgrade dependencies by modifying your Cargo.toml file from the command line.

Currently available sub-command includes:

cargo add
cargo rm
cargo upgrade
cargo set-version

To use cargo-edit, you will need to install it first through cargo install cargo-edit as it's a cargo extension.

6. `cargo +nightly udeps` :

cargo-udeps is used to find unused dependencies in Cargo.toml.
While compilation of this tool also works on Rust stable, it needs Rust nightly to actually run. cargo-udeps is a cargo extension so you have to install it first before it can be used.
It can be installed through cargo install cargo-udeps --locked

7. `cargo expand` :

Once installed, cargo expand prints out the result of macro expansion and #[derive] expansion applied to the current crate.It is a wrapper around the more verbose compiler command:cargo rustc --profile=check -- -Zunpretty=expanded.

Install with cargo install cargo-expand.

Example of using cargo-expand

 #[derive(Debug)]
struct S;

fn main() {
    println!("{:?}", S);
}

cargo expand

#[prelude_import]
use std::prelude::v1::*;
#[macro_use]
extern crate std;
struct S;
#[automatically_derived]
#[allow(unused_qualifications)]
impl ::core::fmt::Debug for S {
    fn fmt(&self, f: &mut ::core::fmt::Formatter) -> ::core::fmt::Result {
        match *self {
            S => {
                let mut debug_trait_builder = f.debug_tuple("S");
                debug_trait_builder.finish()
            }
        }
    }
}
fn main() {
    {
        ::std::io::_print(::core::fmt::Arguments::new_v1(
            &["", "\n"],
            &match (&S,) {
                (arg0,) => [::core::fmt::ArgumentV1::new(arg0, ::core::fmt::Debug::fmt)],
            },
        ));
    };
}

8. `cargo tarpaulin` :

Tarpaulin is a code coverage reporting tool for the Cargo build system.

It's installed with cargo install cargo-tarpaulin. Currently tarpaulin only works on x86_64 CPU architectures running Linux.Use cargo tarpaulin --ignore-tests to compute code coverage for your application while ignoring test functions.

9. `cargo audit` :

cargo audit can be installed through cargo install cargo-audit and is used to audit Cargo.lock files for crates with security vulnerabilities reported to the RustSec Advisory Database.

10. `cargo deny`:

cargo-deny is a cargo plugin that lets you lint your project's dependency graph to ensure all your dependencies conform to your expectations and requirements.
It's used to audit Cargo.lock files for crates with security vulnerabilities, limit the usage of particular dependencies, their licenses, sources to download from, detect multiple versions of same packages in the dependency tree and more.
use cargo install --locked cargo-deny && cargo deny init && cargo deny check to installs cargo-deny, initializes your project with a default configuration, then runs all of the checks against your project.
Example of a check is the licenses check that is used to verify that every crate you use has license terms you find acceptable .

cargo deny check licenses.

To learn more on how to use cargo-deny check the cargo deny book.

The list of Cargo commands is vast and this article provides a small sample of them that you can use and hopefully learn how powerful Cargo is.

How to Structure a Flutter Project

David Adewoyin — Sun, 14 Nov 2021 21:30:33 +0000

A common problem faced by most beginners when attempting to write a program or an app beyond the simple hello world or TODO app is how to properly structure their code in other to accommodate ease of development and evolvement.

Another factor that comes into play when designing how to properly structure your project is the architectural style you use, An application built using bloc or provider tends to have different project structure.

Though there is no one size fit all, the best approach i have found is to sample a wide array of common project structure and to evolve to the one that best suit your need.

How to Structure A Flutter Project

In this article we will be covering how to structure our flutter application.

The Project structure consist of four major sub-folders containing different kind of files.

Models
Views
Services
Commands

Additional folders include components which contains components which are widgets such as buttons, toasts that are share between pages and screens.

Models

The Models folder contains the models of the application each in it own dart file.Some models extends ChangeNotifier and are use to propagate changes down the app such as to add the user name to the screen if the user log in. Example of a user model is shown below.

class User {
  String? id;
  String? firstname;
  String? lastname;
  String? mobile;
  String? email;

  User(
      {this.id,
      this.firstname,
      this.lastname,
     });
  User.fromJson(Map<String, dynamic> json)
      : id = json["id"],
        firstname = json["firstname"],
        email = json["email"],
        mobile = json["phone"],
        lastname = json["lastname"],

An app model class is also created which is used with provider in other to provide change notification to various listeners in the application as the app state changes.

class AppModel extends ChangeNotifier {
  String? _accessToken;
  bool _isFreshInstall = true;
  User? _user;

  String? get accessToken => _accessToken;
  bool get isFreshInstall => _isFreshInstall;
  User? get user => _user;

  set setUser(User user) {
    _user = user;
    notifyListeners();
  }

  set isFreshInstall(bool fresh) {
    _isFreshInstall = fresh;
    notifyListeners();
  }

  set accessToken(String? token) {
    _accessToken = token;
    notifyListeners();
  }

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

Views

Views contains the various pages or screens of your application. The Views can also contain sub-folders that contains related views together.

Services

The third folder is the Services which contains files that makes Apis calls or interact with external network such as HTTP or background location services.Files in this folder are strictly concerned with making requests.

Here is how a service look like

class UserService{

User getUser() async {
// Makes http calls here
}

}

Commands

Commands is how you primarily interact with the Services.The Views invoke a command which in turn can call upon a service to fulfill a task. A base command is created in which other command class simply extends which makes it easy to share common models and services between various commands.

Here is how the BaseCommand class looks like:

BuildContext? _mainContext;
BuildContext get mainContext => _mainContext!;
bool get hasContext => _mainContext != null;

void setContext(BuildContext c) {
  _mainContext = c;
}

class BaseAppCommand {
  UserService get userService => getProvided();
  AppService get appService => getProvided();

  AppModel get appModel => getProvided();

  T getProvided<T>() {
    assert(_mainContext != null,
        "You must call setcontext(buildcontext before call commands");
    return _mainContext!.read<T>();
  }
}

A bootstrap command is also used in other to configure or check app requirement such as is the user logged or initiate state or app configuration.

class BootStrapCommand extends BaseAppCommand {
  Future<void> run(BuildContext context) async {
    if (Commands.hasContext == false) {
      Commands.setContext(context);
    }
    print("Bootstrapping app....");
    await appService.init();
    appModel.accessToken = await appService.accessToken() ?? null;
    var futures = await Future.wait<dynamic>([
      appService.accessToken(),
      appService.init(),
    ]);
    appModel.accessToken = futures.first as String? ?? null;

    if (appModel.accessToken != null) {
      appService.setAccessToken(appModel.accessToken!);
    }
    appModel.isFreshInstall = appService.isAppFreshInstall;
    appModel.setUser = appService.user();
  }
}

In this article i have tried to distill down how to structure a flutter application.