Forem: Flutter Tanzania

Local notifications in flutter

Flutter Tanzania — Wed, 31 Jan 2024 21:09:12 +0000

In this article we will focus on how to create local notifications in flutter by using awesome_notifications package.

Local notifications are notifications that are scheduled by the app and delivered on the same device. We use local notifications to get user's attention. With local notifications we can display an alert, play a sound, or badge our app's icon. For example, an app downloading a file on background could ask the system to display an alert when the app finishes downloading the file.

This article will cover various aspects of local notifications, beginning with Basic Notification. We will then explore Big Picture, Emoji, Action button, progress bar, and scheduled notifications (which are notifications set to repeat at specific date and time).

Create a Flutter project

In order to get started we need to create a flutter project. In your terminal you can easily create a flutter project by running the following command flutter create <Project name>, after creating your project you can open it with your favorite code editor.

After creation of the project we need to install dependencies that we will need to run our Project, and for our case we will install awesome_notifications, make sure you add awesome_notifications in pubspec.yaml file.

After that let's continue with the setup on android and iOS.

Android setup

For android configuration we'll go to the awesome_notification page and scroll to the Initial configuration section -> Configuring android for Awesome Notification click here.

In the first step we'll see that we're required to update build.grade file located inside "android/app/" folder and set minSdkVersion to 21 and the compileSdkVersion and targetSdkVersion to 34.

The second step is to update AndroidManifest.xml file located "android/app/src/main" and add the following permissions.

<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

Then with in the same file, inside activity tag make sure exported is set to true, android:exported="true"

And that's all setup we're required for android.

iOS setup

For iOS setup we're have few configuration to do, mhhhh actually we just need to make sure if the following variable have the required values.

Build libraries for distribution -> NO
Only safe API extensions -> NO
iOS Deployment Target -> NO

To verify them open you're project iOS folder with Xcode and navigate to Runner -> Target Runner -> Build settings, and you can find the above variables by simply searching them.

But also we need to make modifications of our Podfile file you can refer it here

And that's we need in order to get started in iOS.

Initialize Awesome Nofification

In this section we will initialize Awesome notification so we can be able to send notification.

To initialize Awesone notification open main.dart file and inside our main function call the AwesomeNotification constructor and then call initialize method.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  AwesomeNotifications().initialize();
  runApp(const MyApp());
}

When we call .initialize() we'll see that it accepts four parameters which are defaultIcon, channels, channelGroups and debug.

Let's start with the defaultIcon:

For the defaultIcon we will set null so that awesome notification wi'll use the default app icon.

Then we will pass a list of NotificationChannel which are used for creating a notification.

The following is a sample of the NotificationChannel.

NotificationChannel(
    channelKey: "basic_notification",
    channelName: "Basic notifications",
    channelDescription: "Notification channel for basic tests",
    importance: NotificationImportance.Max,
    defaultPrivacy: NotificationPrivacy.Private,
    enableVibration: true,
    defaultColor: Colors.redAccent,
    channelShowBadge: true,
    enableLights: true,
)

The above code defines settings for our notification settings.

Now our main function will be as follows

void main() async {
    WidgetsFlutterBinding.ensureInitialized();

    AwesomeNotifications().initialize(
        null,
        [
            NotificationChannel(
                channelKey: "basic_notification",
                channelName: "Basic notifications",
                channelDescription: "Notification channel for basic tests",
                importance: NotificationImportance.Max,
                defaultPrivacy: NotificationPrivacy.Private,
                enableVibration: true,
                defaultColor: Colors.redAccent,
                channelShowBadge: true,
                enableLights: true,
            ),
        ],
        debug: false,
    );
    runApp(const MyApp());
}

After finishing up setup of our notification we need to request permission for Notification. First we will check if user has granted notification permission else we request it.

Add the following code in the initState of you're home page Widget

@override
void initState() {
  AwesomeNotifications().isNotificationAllowed().then(
    (isAllowed) {
      if (!isAllowed) {
        AwesomeNotifications().requestPermissionToSendNotifications();
      }
    },
  );

  super.initState();
}

This will request permission for our app to send notification to the user.

And that's it for the initialization of local notification, if we hot restart our project we will see a pop that requests notification permission.

Basic notification

In this section we will create our first Notification, let's get into it.

First we will need to modify our home page widget and remove the initial flutter code that comes in when we create our project and add the following code.

Scaffold(
  body: SafeArea(
    child: Center(
      //
      child: ElevatedButton(
        onPressed: ()  {
        },
        child: const Text("Trigger Notification"),
      ),
    ),
  ),
)

In the above code we have updated our home widget and add a button that will be responsible to trigger our notification.

Now our button wait's for the function that it will be calling. Let's create a function that will be triggering notifications.

void localNotification() {
   AwesomeNotifications().createNotification(
      content: NotificationContent(
        id: 1,
        channelKey: 'basic_notification',
        title: "Proc notification",
        body: "Hey awesome prosper",
      ),
    );
}

In the above function we call createNotification from AwesomeNotifications which accepts the following parameters

id - an ID of the sent notification
channelKey - this is the channel that we created while initializing our notification
title - notification title
body - body of the notification

And now let's return in to our button and call our function.

If we hot restart our application and click the button we will the a notification pop.

Conclusion

Let's end here for this article, in our next article we will focus on BigPicture, action button and scheduled notification, for now you can try to play more with the notifications and see what you can do with it.

Flutter Launch Image in iOS

Flutter Tanzania — Sat, 20 Jan 2024 18:33:48 +0000

In this article we'll learn how to add a custom Launch Image in Flutter, by default when you run you're Flutter project in iOS simulator or phone you'll notice that it first start's a blank white screen and continues to you're project Splash Screen.

Here's an outcome of this article

Let's work on that.

If you have you're app logo you can generate a splash screen Image from this website.

When you upload you're logo image, website will provide a pop where you can adjust logo position and background color, after finishing adjustment click generate asset button.

For this article we'll focus on Phones screen and not iPad. When assets are generated we'll scroll down until we see phone's splash screen.

You can click any portrait splash screen and download it.

Now let's switch to Xcode.

Open you're Flutter project in Xcode and let's through the following process.

First expand Runner by clicking the expand Icon on the left side of the Runner

After expand Runner You'll see another Runner folder just below Flutter folder and expand it again.

After expanding the Runner, you'll see a Folder named Assets click it, and it will give you two options

AppIcons - for you're app Icon
LaunchImage - for you're app launch image

Click LaunchImage option and you'll see three options for uploading image but current they're blank.

Double click each option and select the downloaded splashScreen

And boom we're done, you can now run you're app and you'll see it start's with a custom launch image and not a blank white screen again.

Control flow in Dart - Part 2

Flutter Tanzania — Sun, 19 Nov 2023 10:42:50 +0000

Part 2: Control Flow and Loops

The If Statement

In programming, decisions are crucial. The if statement lets us control the flow of our program based on conditions. Consider this example:

int temperature = 25;

if (temperature > 30) {
  print('It\'s a hot day!');
} else {
  print('It\'s not too hot.');
}

Here, if the temperature is greater than 30, it prints 'It's a hot day!'; otherwise, it prints 'It's not too hot.' This helps our program adapt to different situations.

Else-if Chains

For more complex conditions, we use else if:

int hour = 15;

if (hour < 12) {
  print('Good morning!');
} else if (hour < 18) {
  print('Good afternoon!');
} else {
  print('Good evening!');
}

This checks the time of day and greets accordingly, offering more nuanced decision-making.

Ternary Operator

The ternary operator streamlines simple if-else statements:

int age = 20;
String message = (age >= 18) ? 'You can vote' : 'You cannot vote yet';
print(message);

If age is 18 or above, it says 'You can vote'; otherwise, it says 'You cannot vote yet'. This enhances code readability, especially for concise conditions.

Switch Statements

Switch statements are beneficial for multiple cases:

String grade = 'B';

switch (grade) {
  case 'A':
    print('Excellent!');
    break;
  case 'B':
    print('Good job!');
    break;
  default:
    print('Keep trying!');
}

It provides different feedback based on the grade, offering a clearer alternative to long if-else chains.

Loops

Loops help us automate repetitive tasks. Dart offers various types.

While Loop

while loops repeat while a condition is true:

int count = 0;

while (count < 3) {
  print('Count: $count');
  count++;
}

It prints 'Count: 0', 'Count: 1', and 'Count: 2', showcasing the iterative nature of programming.

For Loop

for loops are handy for a fixed number of iterations:

for (int i = 0; i < 4; i++) {
  print('Iteration: $i');
}

It prints 'Iteration: 0', 'Iteration: 1', 'Iteration: 2', and 'Iteration: 3'. This loop structure is efficient when you know the number of iterations in advance.

Break Statement

To exit a loop prematurely, use break:

int target = 2;

for (int i = 0; i < 5; i++) {
  if (i == target) {
    print('Target reached!');
    break;
  }
  print('Current value: $i');
}

This stops the loop when the target value is reached, adding a layer of control to the iteration process.

Mastering these concepts empowers you to build flexible and dynamic programs, adapting to various scenarios and user inputs. Happy coding!

Control flow in Dart - Part 1

Flutter Tanzania — Tue, 31 Oct 2023 09:30:56 +0000

While building a program you will be in a situation where you want tell a computer to do different depend on the scenario. For example you want to check if user age is under 18 the give a message that he/she cannot vote and if user is above 18 he/she can vote.

So basically what we're doing here is we're controlling the flow of our program and telling it what to do depending on the scenario. Let's get it 🥳.

Comparing values

Referring to our example above, we want to know if user is above or under 18, say we have the following (17 > 18), what will answer be?, maybe yes or no?

Dart has a Data type called bool which is Boolean that has only to possible result true and false.

Boolean

A Boolean value can have one of two states. While in general
you could refer to the states as yes and no, on and off, or 1 and 0, most programming languages, Dart included, call them true and false.

Here's how we can define a bool variable

const bool yes = true;
const bool no = false;

When comparing values in dart the result is always a boolean so let's learn more about it.

Boolean operators

We mostly use bool values to compare.

Testing equality
In dart use can use == to test equality of two values. For example

(3 == 6)

This will return a bool value of false.

Note: You may use the equality operator to compare int to double, since they both belong to the num type.

Testing inequality

If we use == we check if two values are equal, but what if we want to check if the values are not equal?, for this we can use != and dart will return true if compared values are not equal and false if compared values are equal.

(3 != 6)

Greater and less than

In other situation you want to check if a certain value is greater or is less than other value, we can do so by using > and <.

(3 > 6)
(3 < 6)

This will return false and true respectively, but that's not the case, what if you want check if value is equal or grater than other and if is equal or less that, to perform this we will use <= for equal or less than and >= for equal or greater than

(3 >= 6)
(3 <= 6)

But this are very minimal operators, we may be in a situation where we want to combine two or more condition.

For example we want to check if a student has finished his work and came to school early. We can do so by using AND operator.

const finishedHomeWork = true;
const isEarly = false;

const result = finishedHomeWork && isEarly;

This code will combine two conditions and give us a result.

Stop 🤔 what if we want check if a certain condition met or other condition is met and perform a task, to this we can use OR operator.

const finishedHomeWork = true;
const isEarly = false;

const result = finishedHomeWork || isEarly;

Let's end here for this first section of control flow, in the next section we will learn about if statements and loops, how to perform certain task repetitive when a condition is met.

Types & Operations in Dart

Flutter Tanzania — Sat, 14 Oct 2023 17:36:58 +0000

Life is full of types, in every thing we do we always use types. What kind of shoes do you wear? Boot? Sneakers? or what kind of phone do you use? iPhone? Google pixel?.
With types we're able to differentiate and categories different things.

This is the same as in computer, in programming types are useful same as in life, They help you to categorize all the different kinds of data you use in your code.

Data types in Dart
In programming types tell our compliers how we want to use data. There are many types of data in Dart and so far we have been able to use some of them including.

int
double
num
String and
dynamic

By using data types dart helps you to perform wrong operation in data example tying to minus a String and int.

Type inference
In our previous article we briefly looked at Type inference in dart, so get deep into it.

One of the best practise while defining a variable is by specifying it's data type like the followings:

int myAge = 22;
double random = 0.1;

With the above code we have defined two variables and we have annotated with int and double respectively.

Making variable constants
In our above example of variables we make them mutable which means they can change within it's life time, but if we do not want that, which means making them immutable we can do that while still keeping the type annotation.

const int myAge = 22;
const double random = 0.1;

final int myAge = 22;
final double random = 0.1;

But it's required to define data type while creating a variable, Dart is smart enough to know which type a variable is using. Through type inference Dart is able to identify a variable data type. See the following code.

const myAge = 22;
const random = 0.1;

In this code we did not tell Dart what type of data we want our variable to have, but dart will know that myAge is an int and random is double, this is called type inference.

You can run the following to see your variable data type

print(myAge.runtimeType);
print(random.runtimeType);

Converting data type
While developing your program you may encounter yourself in situation where you want to convert a certain data to another data type.

We have seen that in Dart if we try to perform the following, Dart will complain.

const myAge = 22;
const random = 0.1;

myAge = 0.22;

Dart will say A value of type 'int' can't be assigned to a variable of type 'double'

As we see Dart is very sensitive in Data type though other programming languages will allow you to do the above without any error. Experience shows this kind of silent, implicit conversion is a frequent source of software bugs and often hurts code performance. Dart disallows you from assigning a value of one type to another and avoids these issues.

But this does not mean that Dart will disallows you from changing data type. We can do so by doing the following.

const myAge = 22;
const random = 4.1;

myAge = random.toInt();

The assignment now tells Dart, unequivocally, that you want to convert from the original type, double, to the new type, int.

Mixed types operations

You'll always encounter in a situation where you want to perform an operation between two different data types. Example you want to make addition between 3 + 3.3, dart is smart enough that it will return double since making it an int could cause a loss of precision.

But what if you want a result to be an int?, we you can do it by using type conversion for example;

const myAge = 22;
const random = 4.1;

final result = (myAge + random).toInt();

This time we used final and not const because toInt() is a runtime method, which means variable result is not known during compile time which makes it invalid

Strings in Dart

In dart we can work with text with a data type known as String, now let's learn about String data type.

We have seen String in previous chapters when we printed.

print('Hello Dart world');

Now let's define a variable and assign a string data type.

var hello = 'Hello Dart world';
print(hello);

Even if we did not defined a data type but still Dart will assign our variable as a String.

But we can be more specific by defining it's data type, like so.

const String hello = "Hello Dart";

Concatenation
There's a point when you want to perform a certain thing within you're String, well dart knowns that and it allow's us to do it.

var hello = 'Hello' + ' Dart ';
const anotherHello = 'World';
hello += anotherHello;

If you print hello variable you will see Hello Dart World, here dart concatenates our Strings to be a single text.

This is very useful when you have a String in a variable and want to combine it with another String.

You can also build up a string by using interpolation, which is a special Dart syntax that lets you build a string in a manner that’s easy for other people reading your code to understand:

const String language = 'Dart';
const String hello = 'Hello $language';

This code does the same thing like the previous one when we used + to join a text, but this more readable than the previous one

Multi-line strings

When you have a String with multiple line you can easily display as following

const string = '''
You can have a string
that contains multiple
lines
by
doing this.''';
print(string);

The three single-quotes (''') signify that this is a multi-line string, but you can also use (""") and it will do the same thing.

Conclusion
This is just an introduction to types, you should search for more resources to learn more.

Expressions, Variables & Constants in Dart

Flutter Tanzania — Mon, 02 Oct 2023 22:23:47 +0000

In our first article we focused on installation of dart and wrote our first dart "Hello Word".

Let's start writing code, in this article we will focus on Variable and expressions in dart. Let's go 🥳

Comments in dart

Comment in programming are non executable line's of code which describes what a code is doing.

Writing comment's in your program describes what was your intention to write a certain block of code and what does that code solving. But also in the future more likely other programmers will be using your code, by commenting it will be easier for them to understand your code.

Comment's in dart can be single line or multiple line comments, here's an example of a single line comment.

// This is a comment, it will never be executed

Now let's see how we can write multiple line comments

/* This is a comment also,
but it's to long
let's break it */

In multiple line's comment the start is denoted by /* and the end is denoted by */.

You can write comment in may ways in Dart but to make it simple we'll stop here in comments.

Printing output
When writing a program there's always a point you want to see an output of a certain code. In dart we use print() function. And this display an out put on the console.

Adding print statements into your code is an easy way to monitor what’s happening at a particular point in your code.

Statements and expressions
In programming you will often come across these two words so first let's understand them.

Statements
A statement is a command, something you tell the computer to do, in dart all simple statements end up with a semicolons, a good example is a print statement.

print('Hello, Dart world');

Semicolons identifies an end of a statement.

In addition to simple statements, Dart also has complex statements and code blocks that use curly braces, but there’s no need to add semicolons after the braces.

One example of a complex statement is the if statement:

if (condition) {
  // code block
}

We will learn more about if statement's in Control Flow section.

Expressions
Unlike statements Expressions does not do something, it is something. Expression is a value or something that can be calculated to a value.

Here are some few examples of expressions.

36
1 + 2
'Hello Dart'
firstName

Values can be numbers, text, or any other type. They can also be a variable example firstName who's value is not known during run time.

Arithmetic operations

Now let's learn arithmetic operations that dart offers. Let's start with simple operations that we're all familiar with.

Add +
Subtract -
Multiply *
Divide /

For example

Keep in mind that all of these operations are expressions because we expect value from them.

Decimal numbers
Most of programming languages uses integer division by default if you have the following calculation (22 / 7), you will expect the result to be 3, However, Dart gives you the standard decimal answer which will be (3.142857142857143).

But in dart if you would want to perform integer division, then you could use the ~/ operator:

22 ~/ 7

This produces a result of 3.

The ~/ operator is officially called the truncating division operator when applied to numbers.

Euclidean modulo operation
There's a point where you want to divide a number and get the remainder, in dart we use %, which will always return a remainder of a given division calculation.

Example:

10 \ 3

The answer will be 1 which is the remainder.

Math functions
As you become more pro in Dart you will in a situation you want to perform a complex operation, Dart can help you with that by providing you a math function.

To use these math functions, add the following import to the top of your file:

import 'dart:math';

dart:math is one of Dart’s core libraries. Adding the import statement tells the compiler that you want to use something from that library.

By importing the math library you can now use math functions from the library, for example sin(), cos() and more.

Variables

In the simplest form a variable is a name that you give it a value and tell a computer to remember it so you can use it later. The name carries with it an associated type that denotes what sort of data the name refers to, such as text, numbers, or a date.

For example

int age = 21;

The statement declares a variable called age which is an int as it's type, which then carries a value of 21. The int part of the statement is known as a type annotation, which tells Dart what the type is.

Let's pause for a while

You will always use = and == now let's see their differences, The equals sign = is known as the assignment operator because it assigns a value to a variable. This is different than the equals sign you are familiar with from math. That equals sign is more like the == equality operator in Dart. We will learn more on next chapter.

To change the value of a variable simple you can assign another value of the same type.

int age=21;
age=22;

Type safety
Dart is a type safe language, which means once you assign a variable it's data type you cannot change it later, example:

int age = 21;
age = 21.9; // This is not allowed

In our example above we first defined a variable with type int and give it value, in the next line we're assigning the same variable with a decimal value which is double in flutter.
If we run this program we will get an error.

But whenever you find yourself in a situation where you want the same variable to be assigned int or float you can use num. The num type can be either an int or a double, so the first two assignments work.

And if you don't care about type safety at all you can use dynamic type which will allow you to use any data type without getting any error.

Type inference
You can define a variable without telling it's type and dart will do that for you. By using var dart allows you to define a variable without telling it's data type and dart will be smart enough to know what type it is.

But by using var keyword dart will still apply type safety, example:

var age = 10;
age = 15; // OK
age = 3.14159; // No

Constants

When we define variables we may encounter in a situation where we don't want the variable value to be changed after it's assigned. Dart has two different types of “variables” whose values never change. They are declared with the const and final keywords, and the following sections will show the difference between the two.

Having variable's that value can change can cause problems in the program, but we use them mostly, this type of variable are called mutable data. It's easy to lose track which variable value can change within our programs, we encourage to use constants whenever possible. Unchangeable variables are known as immutable data.

We use const in Dart to create a constant variable, example:

const age=22;

Now we're telling dart that age value will never change. If we try to do the following we will get an error.

age=21; // this will result an error

final constants

When we use const we always know the value of our variable before running our program, but there's a situation where you want to define a variable as a constant but it's value is unknown until you run your program.

In Dart const is only used for compile-time constants; that is, for values that can be determined by the compiler before the program ever starts running.

If you can’t create a const variable because you don’t know its value at compile time, then you must use the final keyword to make it a runtime constant.

For example, fetching data from the server, asking user data from an input and more.

Conclusion
And that's all for our article, before you continue more try to learn more about our topic today from different resource and do more practice.

Hello Dart World 😜

Flutter Tanzania — Thu, 21 Sep 2023 15:27:39 +0000

Dart is a general purpose programming language that is developed and maintained by Google. With dart one can develop web, server, desktop and mobile applications for iOS and Android.

Dart is easy to learn, and if you came from C-style languages or object oriented it will be easy to pick up, but if your a beginner in programming then Dart is a good place to start with. One exiting thing about dart is that you can build applications in multiple platforms using a single code base.

In this first article series will focus on setting up environment and write our first dart Hello, let's get in 🚀.

Setting up Dart environment:

There are several options that we can use to run Dart to, so first let's look at them.

DartPad: It's a simple browser based tool for writing and running Dart code. It's available in any modern web browser you can access it in https://dartpad.dev.
Visual Studio Code: This is a most used IDE which also supports Dart development by proving Dart extension. We recommend using this tool but if you have another tool you can go with it also.

There many other tools that you can use to run Dart but in our article series we will be using VS Code, you can use any of your preferred IDE.

Installing VS Code
Visual studio code is an open source and cross platform IDE which is maintained by Microsoft and it's available in MacOS, Windows and Linux.

Download Visual Studio Code at code.visualstudio.com, and follow the directions provided on the site to install it.

To run Dart in VS code we need to install Dart SDK first, let's do it.

Installing Dart SDK

Dark SDK is a collection of command line tools that makes it possible to build Dart program.

To install Dart SDK visit https://dart.dev/get-dart and you can follow instructions from the site to complete it's installation.

After you have installed Dart you can run the following command to ensure that everything runs.

dart --version

This command will display your current version of Dart.

Let's explore some of the command that dart offers us and their use. Run the following command.

dart help

This command will list available commands that we can use in dart.

analyze: this command analyses your code and tell when you have made a mistake in your code.
compile: this command complies Dart code into a native executable program for Windows, Linux or MacOS.
create: it's used for creating new dart project.
fix: This command applies automated fixes to your dart code from syntax and more.
run: this command is use to run your dart file to produce the output.
test: this command is for performing unit test in your dart project.

Dart comes with many other command that you can use, to learn more about them you run dart help and explore them.

Write our first code

Now let's write our first line of code, but first let's start by creating a Dart project.

Go the computer location where you want to run your project and run the following command.

dart create hello_dart

This will create a new directory named hello_dart which contains our project files. Navigation to the project by writing cd hello_dart in the command.

To run our first dart project we will run the following command.

dart run hello_dart.dart

What was the output?

A dart project contains the following list of files

bin: this directory contains all of our executable files
hello_dart.dart: which is named as the same name of the project, this file contains Dart code to execute.
pubspec.yaml: pubspec.yaml: Contains a list of the third party Pub dependencies you want to use in your project.
README.md: This describes what our project is about and how it's organized.
analysis_options.yaml: Holds special rules that will help you detect issues with your code.
.gitignore: Lists all files that won't be needed when your uploading your files in git repository.

And that's for this article, but don't stop here you can search online for another resources and learn more about dart.

In our next article we will focus on Expressions, Variables & Constants, see you then.

Getting Started with Dart: The Essential First Step for Flutter Beginners

Flutter Tanzania — Tue, 19 Sep 2023 10:25:19 +0000

Starting your journey into Flutter development is an exciting adventure. The promise of creating beautiful apps for multiple platforms is awesome. However, there's a aspect that many beginners overlook, just like I did when I first began – learning Dart, the language that powers Flutter. In this article, I'll share why mastering Dart first is crucial and introduce you to our upcoming beginner-friendly Dart tutorial series.

The Flutter Rush:
When you first hear about Flutter, it's natural to want to jump straight in. After all, who doesn't want to create amazing apps quickly? However, it's easy to forget that behind the magic of Flutter lies Dart, a language that you need to understand to unlock Flutter's true potential.

Why Dart Matters:
Dart is like the magic wand that makes Flutter work. It's the language that helps you create the logic and functionality in your Flutter apps. Before you can become a Flutter pro, you must become a Dart enthusiast.

Learning Dart Step by Step:
To make your journey into Dart as smooth as possible, we've designed a beginner-friendly Dart tutorial series. It doesn't matter if you're completely new to programming or just new to Dart – we've got you covered.

What We'll Learn:
In this series, we'll break down Dart into bite-sized pieces, so it's easy to grasp:

1: Hello dart - Here we will learn how to install and run dart, and we will write our first Dart Hello Word 😜.

2: Expressions, Variables & Constants - we will learn how to name data using variables and also get a brief introduction to Dart data types.

3: Types & Operations - In this series we will learn more about Dart data types.

4: Control Flow - In this section we’ll learn how to make decisions and repeat tasks in your programs.

5: Functions - We’ll learn how to write functions in Dart, including both named functions and anonymous functions.

6: Classes - In this section we will see a more flexible way to create your own types by using classes

7: Nullability - Ever tried to access data that's not there?, In this section we will learn and how to handle Null values.

8: Asynchronous Programming - We’ll not only learn
how to deal with code that takes a long time to complete, but along the way, we’ll also see how to handle errors, connect to a remote server and read data from a file.

Conclusion:
In conclusion, remember that learning Dart first is your secret weapon in becoming a skilled Flutter developer. Join us on this Dart adventure, and together, we'll unlock the full potential of Flutter. Stay tuned for our beginner-friendly Dart tutorials – we can't wait to get started with you on this exciting journey into app development! 🚀🌟

Biometric Authentication in Flutter(Face ID/ Fingerprint)

Flutter Tanzania — Tue, 08 Aug 2023 11:41:25 +0000

One of the essential thing in mobile application is security especially if your building a finance app, and one of the most used security measure is using biometric authentication, which means you verify user by using phone face ID, Fingerprint or phone password.

Authentication using biometrics can be challenging. As it requires a good understanding of the underlying platform's APIs and implementation details.

But also, not all devices support biometric authentication, which requires developers to handle when user device does not have biometric authentication.

Luck us flutter provides a package for this local_auth

This package implements biometric security with Face ID and Touch ID/Fingerprint.

😜 Let's dive in and learn how to implement it in our flutter app.

But wait we need to go through the following steps to implement this.

Setting up the project
Checking biometric availability
Requesting biometric authentication
Handling authentication results

Setting up the project

First thing we need to install local authentication to our project.

dependencies:
   local_auth: ^2.1.6

Then run the following command to install this plugin, though if your using vsCode you do not need to run this.

flutter packages get

Android Setup

Add following line under manifest tag in AndroidManifest.xml

<uses-permission android:name="android.permission.USE_BIOMETRIC"/>

Then Update the MainActivity.kt file to use FlutterFragmentActivity instead of FlutterActivity:

//add this import
import io.flutter.embedding.android.FlutterFragmentActivity

//Chnage to FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
      // ...
}

IOS Setup

Add following code to your info.plist

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

😮‍💨 we're done with the setup now let's write some code.

Checking biometric availability

We need to make sure that user phone has biometric authentication before we request to use it.

To check if biometric authentication is available or not. We use canCheckBiometrics method on the LocalAuthentication class.

Create a statefull widget called LoginScreen and add the following functions

import 'package:local_auth/local_auth.dart';

final LocalAuthentication _localAuth = LocalAuthentication();

//Check if biometric auth is available
Future<boolean> hasBiometrics() async {
    try {
        return await _localAuth.canCheckBiometrics;
    } on PlatformException catch (e) {
        return false;
    }
}

//Check type of biometric auth available (Eg - Face ID, fingerprint)
Future<void> checkBiometricType() async {
  final availableBiometrics = await _localAuth.getAvailableBiometrics();
  print('Available biometrics: $availableBiometrics');
}

hasBiometrics functions checks if user device has biometric authentication by using canCheckBiometrics

Authenticate user

If hasBiometrics function returns true now we can use biometric authentication to verify user.

Call the authenticate method of the LocalAuthentication class.

The authenticate method takes 3 parameters -

localizedReason - is the message to show to user while prompting them for authentication. This is typically along the lines of: 'Authenticate to access MyApp.'. This must not be empty.
authMessages - if you want to customize messages in the dialogs.
options - for configuring further authentication related options.

//Authenticate using biometric
  Future<bool> authenticate() async {
    final hasBiometric = await hasBiometrics();

    if (hasBiometric) {
      return await _localAuth.authenticate(
        localizedReason: "Scan fingerprint to authenticate",
        options: const AuthenticationOptions(
          //Shows error dialog for system-related issues
          useErrorDialogs: true,
          //If true, auth dialog is show when app open from background
          stickyAuth: true,
          //Prevent non-biometric auth like such as pin, passcode.
          biometricOnly: true,
        ),
      );
    } else {
      return false;
    }
  }

Now let's build a simple UI for the authentication, we will have a login screen with a button and when a user is verified we will direct them to another page else we will display a snackbar of failure to authenticate.

Home screen

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: const Text('Home Screen')),
            body: const Center(
                child: Text('Home Screen'),
            ),
        );
    }
}

And in our LoginScreen return the following

Scaffold(
      appBar: AppBar(title: const Text('Login Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final isAuthenticated = await authenticate();

            if (isAuthenticated) {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => HomeScreen()),
              );
            } else {
              final snackBar = SnackBar(content: Text('Auth Failed'));
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            }
          },
          child: const Text('Authenticate'),
        ),
      ),
    );

Now we are good to go, you can test this project in a real device to gain the experience.

Happy coding 🥳

Native Splash Screen in Flutter

Flutter Tanzania — Sun, 30 Jul 2023 14:16:56 +0000

One of the thing that I experienced while building flutter application is a white blank screen that appears when an application starts. To me is very annoying and I do known that it does not bring good user experience. This can be frustrating for users and can make your app feel unprofessional.

But the good news is that you can remove the blank white screen and display an image or logo just like other apps that we use in our daily activities.

In this article we will be using a package known flutter_native_splash to display a custom splash screen when our apps starts.

What is a Splash Screen?

A splash screen in mobile applications is a graphical element that appears when you launch the app. It is usually displayed for a short period, typically a few seconds, while the app is loading its core components and initialising necessary resources in the background. Splash screens serve as an initial branding or introductory screen for the app, providing a smooth and visually appealing transition from the app launch to the main user interface.

Add flutter_native_splash package in our project

Add flutter_native_splash as dependency to your Flutter project.

You can do this by adding the following line in pubspec.yaml

dependencies:
  flutter_native_splash: ^2.3.1

And then run flutter pub get

Setting up Splash Screen

First thing is to add an image that we want it to appear in our splash screen, this can be a logo or any image.

Also do not forget to add the following line is your pubspec.yaml file.

flutter:
    assets:
        - assets/

This will tell Flutter where it can find our images

Now let's start the coolest part

You need to configure flutter_native_splash to use the image for the splash screen.

Inside you're pubspec.yaml add flutter_native_splash with following configuration

flutter_native_splash:
  # Background color of splash screen
  color: "#ffffff"
  # Image that you want to show
  image: assets/splash.png
  # Sizing of image
  fill: true
  # Splash Image to show in dark mode (Optional)
  image_dark: assets/splash_dark.png
  # Background color of dark mode (Optional)
  color_dark: "#000000"

Also make sure you do not add this configs under flutter section.

But wait!!! one more step.

Run the following command so that flutter_native_splash package can do it's magic 🪄

flutter pub run flutter_native_splash:create

And that's it, now your user will have an amazing experience when they click your app 🥳.

Creating shimmer animations using flutter

Flutter Tanzania — Thu, 27 Jul 2023 22:38:42 +0000

One of the best user experience in any application is a loading indicator, ever used youtube and saw a loading indicator that tells you some is coming??

One of the best package for shimmer loading is fade_shimmer, and we will be using it in this example.

https://pub.dev/packages/fade_shimmer

Install this package in to your project and let's start right away

Fade shimmer package have a Widget named FadeShimmer which receives the following properties. 👇🏽

height: Height of the single shimmer
width: Width of the single shimmer
radius: defines border radius of the single shimmer
millisecondsDelay: delay time before update the color
fadeTheme: defines the UI mode of the shimmer

Write the following code into your project

import 'package:fade_shimmer/fade_shimmer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer effect',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

void doStuff() {}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final highlightColor = Color(0xFF696C80);
    final baseColor = Color(0xFF4B4D5C);
    return Scaffold(
      backgroundColor: const Color(0xFF353535),
      body: SafeArea(
        child: ListView.builder(
          padding: EdgeInsets.only(top: 20),
          itemBuilder: (_, i) {
            final delay = (i * 300);
            return ShrimmerCard(
                delay: delay,
                highlightColor: highlightColor,
                baseColor: baseColor);
          },
          itemCount: 20,
        ),
      ),
    );
  }
}

class ShrimmerCard extends StatelessWidget {
  const ShrimmerCard({
    Key? key,
    required this.delay,
    required this.highlightColor,
    required this.baseColor,
  }) : super(key: key);

  final int delay;
  final Color highlightColor;
  final Color baseColor;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: FadeShimmer(
        height: 15,
        width: 150,
        radius: 20,
        millisecondsDelay: delay,
        highlightColor: highlightColor,
        baseColor: baseColor,
      ),
    );
  }
}

Save and run this file and you will see the following output

By using shimmer loader provides best user experience of the app to your users.

What is null safety? Why is Dart called Null Safety.

Flutter Tanzania — Sat, 15 Jul 2023 12:20:27 +0000

As with any programming language or framework, ensuring code reliability and preventing unexpected errors are crucial for delivering a robust application. One of the significant enhancements introduced in Dart 2.12, the language used by Flutter, is the concept of nullability. In this article, we will explore nullability in Flutter and how it contributes to writing safer code.

Nullability refers to the ability of an object or variable to hold a null value, which signifies the absence of a value. Historically, null references have been a common source of bugs in software development, often leading to crashes or unexpected behavior. Dart's null safety feature addresses this problem by providing developers with a set of tools and annotations to denote whether a variable can be null or not.

In previous versions of Dart, all variables were nullable by default, meaning they could hold null values. While this flexibility was useful in certain scenarios, it also introduced the risk of null reference errors. With null safety, Dart introduces two main types of variables: nullable and non-nullable. Non-nullable variables cannot hold null values, thereby reducing the chances of null-related issues.

To denote the nullability of variables explicitly, Dart introduces two operators: the question mark (?) and the exclamation mark (!). When a question mark is appended to a type, it signifies that the variable can be null. Conversely, the exclamation mark denotes a non-nullable type, ensuring that the variable cannot hold null values.

Let's consider a simple example to illustrate the usage of nullability in Flutter:

String? nullableString;
String nonNullableString = 'Hello, Flutter!';

In the above code snippet, nullableString is explicitly marked as nullable using the ? operator, while nonNullableString is a non-nullable variable. This distinction makes it clear to the developer and the compiler about the intention behind the variable usage.

Null safety also introduces a new syntax for handling null values called the null-aware operator. This operator, denoted by the question mark followed by a period (?.), allows developers to safely access properties or methods of an object that might be null. If the object is null, the expression evaluates to null rather than throwing an exception.

String? nullableString;
int? length = nullableString?.length;

In the code snippet above, nullableString?.length retrieves the length of the string if nullableString is not null. If nullableString is null, the expression evaluates to null, preventing a potential null reference error.

The null safety feature in Dart is not only limited to variables but also extends to function parameters and return types. By annotating parameters and return types as nullable or non-nullable, developers can ensure clarity and avoid null-related issues.

Additionally, Dart's null safety feature provides an improved type system that can infer nullability based on variable initialization and usage. This type inference reduces the need for explicit nullability annotations in many cases, resulting in cleaner and more concise code.

While null safety in Dart brings numerous benefits in terms of code reliability and reduced bugs, it is important to note that migrating existing codebases to embrace null safety can be a non-trivial task. The migration process involves thoroughly analyzing the codebase, updating dependencies, and addressing potential nullability issues. However, the effort is worthwhile, as it leads to more stable applications and a better developer experience in the long run.

In conclusion, nullability in Flutter, powered by Dart's null safety feature, is a significant step forward in writing safer and more reliable code. By explicitly denoting the nullability of variables, leveraging the null-aware operator, and embracing the improved type system, developers can prevent null-related bugs and enhance the overall quality of their Flutter applications. As Flutter continues to evolve, embracing null safety becomes increasingly important for developers aiming to build robust and high-performing applications.