This episode will build a user registration and authentication system that will interface with a backend system. It will cover the following flows: registration, login, auto-login, and logout. We will use the provider package to maintain state and the backend will be a Phoenix application (you can use any web service of your choice).

Start

Let’s create a new flutter project called jada

flutter create jadacd jada

We would need the provider package; add the following to your pubsec.yaml file

dependencies:   
provider: ^4.3.1

Install the package using flutter pub get and we can subsequently use it in our project as…


In this episode, we will build this interface using flutter. Desktop support allows you to compile Flutter source code to a native macOS or Linux desktop application.

We will be recreating this image from Dribble. I will make some changes on the outcome, some icons and images that will make the final cut will be different as I couldn’t find the originals when coding this UI. Also tweak it to my tastes

The Set Up

Detail instructions on how to setup flutter desktop applications can be found on the official website here. This tutorial will focus on making the UI and please refer…


My first adventure with flutter was making a minimum viable product app for a Nigerian startup called powershop, a platform that sells electricity across different states in Nigeria.

I found flutter and some days later, I started building the mobile app. Flutter just worked and I loved it ever since. I will not address myself as a mobile app developer, I have also built some apps in the past using Java on Android and J2ME, NativeScript and Ionic. My core area specialty is writing backend services. …


The common approach for most people building elixir projects is to use phoenix, a productive, reliable and fast elixir web framework and a very often you start thinking that the dependencies that phoenix comes with are part of phoenix.

A popular example is Ecto, a toolkit for data mapping and language integrated query for Elixir. You can use Ecto without phoenix in your elixir projects just like every other OTP application out there and vice versa.

Setup

This quick example demonstrates how to use Ecto with Postgres in your mix projects. Create a supervised elixir application using in this command

mix…


The slides

Last weekend I spoke at a local Google IO Extended event. While preparing my presentation slides I thought I should build them with Flutter. This episode of Flutter Thursday explains how I built my presentation slides using Flutter for Web. You can see my presentation on speakersdesk.com. Though I completed the slides using powerpoint because I had little time.

Preamble

Flutter for web allows you compile flutter code written in Dart to run on the web and rendered using web technologies.

Flutter for web is still in technical review at the time of writing this and a fork of flutter repo…


Let’s create a two level-dependent dropdown with flutter. We will use data from this Nigerian location API, specifically the states and local government council areas data. Every state has many local governments councils. The first drop down will contain the states and on a selection of a state item, it will populate the second dropdown with its local councils.

The sample data from http://locationsng-api.herokuapp.com/api/v1/lgas looks like this:

In this episode, we will not make API calls rather save the file and read it locally.

Getting Started

$ flutter create multi_level_dropdown$ cd multi_level_dropdown

Inside the lib folder, create a new file…


This episode of Flutter Thursday will focus on making a crypto wallet design from Pinterest. I will make this a two-part series, with the first part focusing on the design and the last part on how to stream data from a real streaming backend.

https://www.pinterest.com/pin/342132902940171917/

Getting started

flutter create crypto_wallet
cd create crypto_wallet

Open main.dart file, delete everything and include the following

We will need to create the CryptoWallet widget. Before that let’s look at the design again. …


In this episode of Flutter Thursday, we would make a banking account Ui taken from Dribble.

Getting started

Let’s start by creating a new flutter project

flutter create banking_app_account_uicd banking_app_account_ui

We begin by getting rid of the content inside main.dart file, then include the code below:

We started by importing material.dart and app_drawer.dart. The app_drawer.dart will contain the side drawer. Create and save the files inside the lib folder. The runApp() function inflates MyApp widget and attaches it to the screen for display.

Thereafter we defined some properties for the materialApp(), this is pretty the flutter way of getting started…


Today’s piece is fairly an easy pick. Many apps use a walkthrough to reveal it’s functionality to users. On Flutter Thursday, we pick random designs from the internet or some challenge and attempt to make flutter apps. Today’s episode, we focus on making a barebone onboarding app.

flutter create walkthrough
cd walkthrough

Get rid of the content inside the lib/main.dart file and add the following code

We will cheat here using an existing flutter package to highlight the current walkthrough page. Open pubspec.yaml and include dots_indicator: ^0.0.4 among your dependencies

Next will add a new widget that will…


This is the second part of the Beautiful List UI and Detail Page article. It will focus on dynamic content, navigation, the detail page, fixing the fonts, icons, and text. If this gets too long, I will break it into a third. Please do review the first part one of this write-up

ADDING IMAGES AND FONTS

We will add some assets to the app: an image for the detail page background and Raleway fonts. Create a fonts folder and add the font downloaded ttf files (Regular and Thin). Add the image to the assets folder. Then open pubspec.yaml

Shuaib Afegbua

Technology enthusiast, software craftsman and I love to build things. Elixir, Java, Scala and Dart/Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store