DEV Community: Paul Halliday

How to Create a BottomNavigationBar with Flutter

Paul Halliday — Sun, 26 Apr 2020 14:30:17 +0000

In this article we'll be creating a BottomNavigationBar with the ability to switch between different tabs using IndexedStack. You'll want to use this when creating tab based user interface(s) with their own navigation stack.

Our example application will be simple. It'll consist of four screens total, three of which are "main" tab pages, the final one being a detail page that we push on the navigation stack.

New Project

Let's create a new Flutter project in the terminal:

# New Flutter project
$ flutter create flutter_shopping

# Open in editor
$ cd flutter_tabs && code .

Page Creation

We can start off by creating our main pages that will be displayed in our tab system. These will be simple StatelessWidgets and the content doesn't matter for our tutorial.

/// lib/presentation/shop/pages/shop_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_shopping/presentation/product_detail/pages/product_detail_page.dart';

class ShopPage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (context) => ShopPage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Shop"),
      ),
      body: Center(
        child: FlatButton(
          onPressed: () => Navigator.of(context).push(
            ProductDetailPage.route(),
          ),
          child: Text("Navigate to Product Detail Page"),
        ),
      ),
    );
  }
}


/// lib/presentation/home/pages/home_page.dart
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (context) => HomePage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
        child: Text("Hello, Home!"),
      ),
    );
  }
}


/// lib/presentation/search/pages/search_page.dart
import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (context) => SearchPage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search"),
      ),
      body: Center(
        child: Text("Hello, Search!"),
      ),
    );
  }
}


/// lib/presentation/product_detail/pages/product_detail_page.dart
import 'package:flutter/material.dart';

class ProductDetailPage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (context) => ProductDetailPage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Product Detail"),
      ),
      body: Center(
        child: Text("Hello, Product!"),
      ),
    );
  }
}

TabPage and BottomNavigationBar

Now that we've got the ability to show various pages (i.e. HomePage, SearchPage, and so on), we'll create a TabPage. This page will use IndexedStack to display a different body depending on the current tab selected by the user.

In order to make this easier to generate, let's create a TabNavigationItem to hold information about our tab:

/// lib/presentation/tabs/models/tab_navigation_item.dart
import 'package:flutter/widgets.dart';

class TabNavigationItem {
  final Widget page;
  final Widget title;
  final Icon icon;

  TabNavigationItem({
    @required this.page,
    @required this.title,
    @required this.icon,
  });

  static List<TabNavigationItem> get items => [
        TabNavigationItem(
          page: HomePage(),
          icon: Icon(Icons.home),
          title: Text("Home"),
        ),
        TabNavigationItem(
          page: ShopPage(),
          icon: Icon(Icons.shopping_basket),
          title: Text("Shop"),
        ),
        TabNavigationItem(
          page: SearchPage(),
          icon: Icon(Icons.search),
          title: Text("Search"),
        ),
      ];
}

We can then use this and our other pages to create a TabsPage which will use our aforementioned IndexedStack with a _currentIndex that changes whenever a user taps a tab.

import 'package:flutter/material.dart';
import 'package:flutter_shopping/presentation/home/pages/home_page.dart';
import 'package:flutter_shopping/presentation/search/pages/search_page.dart';
import 'package:flutter_shopping/presentation/shop/pages/shop_page.dart';
import 'package:flutter_shopping/presentation/tabs/models/tab_navigation_item.dart';

class TabsPage extends StatefulWidget {
  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [
          for (final tabItem in TabNavigationItem.items) tabItem.page,
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) => setState(() => _currentIndex = index),
        items: [
          for (final tabItem in TabNavigationItem.items)
            BottomNavigationBarItem(
              icon: tabItem.icon,
              title: tabItem.title,
            )
        ],
      ),
    );
  }
}

How does IndexedStack work?

Given a list of Widgets (i.e. the children of HomePage, ShopPage and SearchPage), it'll display the Widget where the children matches the currentIndex.

For example, if our currentIndex was 1 and our children array looked like:

children: [
  HomePage()
  ShopPage()
  SearchPage()
]

Our IndexedStack would display the ShopPage.

We'll now be able to update our main.dart to place TabsPage as our home entry:

import 'package:flutter/material.dart';
import 'package:flutter_shopping/presentation/tabs/pages/tabs_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TabsPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

This gives us the following result:

Summary

We've now used the IndexedStack to switch our displayed widget depending on the item selected by the user!

Code for this article: https://github.com/PaulHalliday/flutter_indexed_stack_tab_view

#2 Developing World of Warcraft AddOns - Music Player

Paul Halliday — Sat, 25 Apr 2020 20:19:48 +0000

In Part One of our Developing World of Warcraft AddOns series we looked at how to create a basic "Hello, World!" AddOn. We managed to load it up in game and display a message on screen, both at initialisation time and with a slash command.

Zolten gave me 16g whilst writing this article. He's a cool guy!

Today we'll be looking at how to play music and sound file(s) with our AddOns and creating a sound board, of sorts. It'll be slash command based, so the user will be able to type in something like:

/playsound ding
/playsound murlocs
/playsound main theme
/playsound custom
/stopsound

As you can imagine, each one allows us to play a particular sound or music file. We'll also be able to play custom sounds that we've added directly to our AddOn!

New AddOn

Let's create a new AddOn folder at Interface/AddOns/MusicPlayer with the following MusicPlayer.toc:

## Interface: 11303
## Title: MusicPlayer
## Notes: Play sounds and music inside of the game.
## Author: Paul Halliday
## Version: 0.0.1

MusicPlayer.lua

Finding Sounds

The easiest way to find sounds from World of Warcraft is to head over to Wowhead and find the in-game ID. For example, if we wanted to add the MurlocAggro sound, we'd likely search for Murloc and then click Links > Copy In-game Sound Command:

This gives us the following command:

/script PlaySound(416)

Try it in-game. You'll hear mrlrlrmrmrrrgllkrkglrl!

We can also go ahead and do the same for the Ding! noise:

This gives us the following command:

/script PlaySound(888)

> Ding! > Grats!

We can also find game music with sites such as wow.tools which we can play using PlayMusic(id)

This can be played in-game by typing the following command:

/script PlayMusic("Sound\\Music\\GlueScreenMusic\\wow_main_theme.mp3")

You'll need to ensure that you've got music enabled for this to work.

If you're making an AddOn for retail, you'll want to use the fileId instead, i.e. PlayMusic(53223)

We're then able to stop the music by typing:

/script StopMusic()

That's enough title music for now... :)

Given what we now know, we can create a little MusicPlayer which allows us to play sounds with a slash command.

It's time to write some code!

Registering Slash Commands

The first thing that we're going to do is register a slash command for our sound player. We'll want to register both /playsound and /stopsound inside of MusicPlayer.lua:

SLASH_SOUND1 = "/playsound"
SLASH_STOPSOUND1 = "/stopsound"

local function playSoundHandler()
  print("Play sound!")
end

local function stopSoundHandler()
  print("Stop sound!")
end

SlashCmdList["SOUND"] = playSoundHandler;
SlashCmdList["STOPSOUND"] = stopSoundHandler;

If we type /reload in-game, we should be able to see our messages if we type either of our slash commands.

Displaying Sounds

In order to play these sounds with our AddOn, we can make a table named sounds which contains information about the sound we'd like to play.

This allows us to either make a decision on which method we want to call to play the sound, or display information on screen to the user about the sound.

local soundType = {
    SOUND = 1,
    GAME_MUSIC = 2,
    CUSTOM = 3
}

local sounds = {
    ["murloc"] = {
        ["sound"] = 416,
        ["description"] = "Mglrlrlrlrlrl!",
        ["type"] = soundType.SOUND
    },
    ["ding"] = {
        ["sound"] = 888,
        ["description"] = "Grats!",
        ["type"] = soundType.SOUND
    },
    ["main theme"] = {
        ["sound"] = "Sound\\Music\\GlueScreenMusic\\wow_main_theme.mp3",
        ["description"] = "DUN DUNNN... DUNNNNNNNNNN",
        ["type"] = soundType.GAME_MUSIC
    },
    ["custom"] = {
        ["sound"] = "Interface\\AddOns\\MusicPlayer\\Sounds\\custom.mp3",
        ["description"] = "Custom sound!",
        ["type"] = soundType.CUSTOM
    }
}

Feel free to add your own sounds here and experiment with different sounds from Wowhead.

I've also added a sound called custom.mp3 inside of a new folder I created at AddOns/MusicPlayer/Sounds. This represents the ability to play a sound outside of the standard game files.

There isn't anything special about the folder name Sounds, so feel free to add a custom sound wherever suits your use case. If you'd like to play your own sounds, go ahead and add it to the directory and sounds table like I did.

We can now create a new function named displaySoundList which will be used to print the potential sounds on screen to the user:

local function displaySoundList()
    print("----------------------------")
    for command in pairs(sounds) do
        local description = sounds[command].description
        print("Command: /playsound " .. command .. " - Description: " .. description)
    end
    print("----------------------------")
end

In order to use this, update your playSoundHandler to call the displaySoundList whenever we activate this command:

local function playSoundHandler()
  displaySoundList()
end

Playing Sounds

Now that we've got a very helpful sound list, the user knows that they can type a particular command to play a sound!

Let's now wire up that functionality to actually play a sound by updating our playSoundHandler:

local function playSoundHandler(trackId)
  if(string.len(trackId) > 0) then
      local matchesKnownTrack = sounds[trackId] ~= nil

      if (matchesKnownTrack) then
          local track = sounds[trackId]

          playTrack(track)
      else
          displaySoundList()

          print(trackId .. " - Doesn't match a known track.")
      end
  else
      displaySoundList()
  end
end

Our control flow now looks like the following:

If there has been a track passed in by the user and it exists, play the track.
If there has been a track passed in by the user and it doesn't exist, display the sound list and a message.
If there is no track, display the sound list.

Let's write our playTrack method so that we can actually play a sound!

local customSoundId

local function playTrack(track)
  print(track.description)

  if(track.type == soundType.GAME_MUSIC) then
      PlayMusic(track.sound)

      print("To stop the music type /stopsound")
  elseif(track.type == soundType.SOUND) then
      PlaySound(track.sound)
  elseif(track.type == soundType.CUSTOM) then
      stopSoundHandler()
      customSoundId = select(2, PlaySoundFile(track.sound))
  end
end

We're now able to either PlayMusic(track.sound), PlaySound(track.sound) or PlaySoundFile(track.sound) depending on the type that we determined inside of our sounds table earlier.

Notice how we're creating a customSoundId and only defining a value when we use PlaySoundFile as this returns us an id which we can use to stop the sound later in the next step.

Stopping Sounds

For the next step, I'm going to assume that any sound is just a few seconds long and a user wouldn't want to type /stopsound to cancel it. A user may want to stop music and custom sound files though.

Let's update our stopSoundHandler to support this:

local function stopSoundHandler()
  StopMusic()

  if(customSoundId ~= nil) then
      StopSound(customSoundId)
      customSoundId = nil
  end
end

We're now able to stop sounds using /stopsound!

You can try this out if you either play a custom sound file or some music with PlayMusic.

Summary

In the second part of our Developing WoW AddOns series we created a little Music Player! It's not going to win AddOn of the year award by any stretch just yet, but we hopefully learned a little more about playing sound files.

Code for this article: https://github.com/PaulHalliday/wow_addon_music_player

#1 Developing World of Warcraft AddOns - Hello World

Paul Halliday — Wed, 22 Apr 2020 16:24:06 +0000

I've been playing quite a bit of World of Warcraft Classic lately. I used to play way back in ~2005 and it's been a large part of my life. I've never developed any AddOns for WoW before, but I figured it'd be a fun experiment to document my progress learning how to create WoW AddOns.

The video for this article is on the way! Subscribe here to make sure you don't miss it.

WoW AddOns are created using the Lua scripting language and development can be done in the editor of your choice. I'm using Visual Studio Code for this with the WoW Bundle plugin installed for colorisation and other features.

With that said - let's dive right in and create our first AddOn!

Creating our WoW Addon

Start off by navigating to your World of Warcraft AddOns directory (this will be World of Warcraft/_classic_/Interface/AddOns in my instance) and make a new folder called HelloWorld.

This is where we'll be placing all of the code related to our AddOn.

Make a new file here named HelloWorld.toc with the following:

## Interface: 11304
## Title: HelloWorld
## Notes: Prints "Hello, World" to the chat.
## Author: YourName
## Version: 0.0.1

HelloWorld.lua

NOTE: The .toc file must have the same name as the AddOn's folder.

This is known as a Table of Contents file and allows us to provide metadata about our AddOn as well as files to be loaded at runtime. Here we're essentially stating that we want to load HelloWorld.lua and our AddOn is named HelloWorld.

The Interface number will match the current WoW patch and allows the WoW client to determine whether an AddOn is out of date. This number is different for Classic and Retail.

There are numerous ways to get the current Interface id, but the easiest way is to type the following in-game:

/run print((select(4, GetBuildInfo())));

Build Number: 11304

Alternatively, you could copy this from another AddOn that isn't out of date from within your AddOns folder.

If we boot up the game and click AddOns on the bottom left of the character selection screen, we should be able to see our HelloWorld AddOn!

Hello, World!

Before we test this with our AddOn, let's verify what we're expecting to see by running it as a /script message("Hello, World!") inside of the WoW Chat UI.

We should see a box come up on our screen saying Hello, World!

Great. We can now reproduce this with our HelloWorld AddOn.

Our AddOn will load the HelloWorld.toc look for the HelloWorld.lua that we've stated should be loaded at runtime. We can go ahead and create this in the same HelloWorld folder with:

message("Hello, World!")

Any time we make changes to our AddOn, we'll need to run /reload in the chat to be able to see our changes.

In this circumstance, because we've added a brand new file, we'll have to restart the WoW client.

If we've done everything correctly, we should see Hello, World in game without having to type anything in the chat!

Player Name

We can also make this a little more special by using the current player name by accessing the UnitName method:

local name = UnitName("player")

message("Hello, " .. name .. "!")

This should now say, Hello {name}! where the name is equal to your player name. We can see this in action:

Slash Command

We could even add a slash command to make this more dynamic. What if we had a slash command that we could type /helloworld or /helloworld name and this would show a custom message?

We can update our HelloWorld.lua to support this:

SLASH_HELLO1 = "/helloworld"

local function HelloWorldHandler(name)
    if(string.len(name) > 0) then
        message("Hello, " .. name .. "!")
    else
        local playerName = UnitName("player")
        message("Hello, " .. playerName .. "!")
    end
end

SlashCmdList["HELLO"] = HelloWorldHandler;

We now get one of two things:

If we pass nothing into /helloworld it'll show Hello, {playerName}!
If we pass a name into /helloworld john it'll say Hello, John!

The SlashCmdList["HELLO"] will point any slash command registered with SLASH_HELLO{x} toward our HelloWorldHandler, so we could register another command such as /msg with and get the same result:

SLASH_HELLO1 = "/helloworld"
SLASH_HELLO2 = "/msg"

local function HelloWorldHandler(name)
    if(string.len(name) > 0) then
        message("Hello, " .. name .. "!")
    else
        local playerName = UnitName("player")
        message("Hello, " .. playerName .. "!")
    end
end

SlashCmdList["HELLO"] = HelloWorldHandler;

Finally, we can clean up our HelloWorldHandler to instead have a showGreeting(name) which stops our repetitive message call:

SLASH_HELLO1 = "/helloworld"
SLASH_HELLO2 = "/msg"

local function showGreeting(name)
    local greeting = "Hello, " .. name .. "!"

    message(greeting)
end

local function HelloWorldHandler(name)
    local nameExists = string.len(name) > 0

    if(nameExists) then
        showGreeting(name)
    else
        local playerName = UnitName("player")

        showGreeting(playerName)
    end
end

SlashCmdList["HELLO"] = HelloWorldHandler

Summary

We've now made our first WoW AddOn! You can find the code for this article here: https://github.com/PaulHalliday/wow_addon_hello_world

Next up, let's make a Music Player in part two of this series!

How to Use ProxyProvider with Flutter

Paul Halliday — Tue, 21 Apr 2020 14:04:44 +0000

In this article we're going to look at how to use ProxyProvider to inject data into other providers. This is useful if we're wanting to inject an auth token or other piece of dynamic data into another Provider at some point in the future.

The ProxyProvider has an update method which is called whenever one of its dependencies has updated. We'll see this in action in our example application by passing a GreetingService a UserService which is able to provide the current user.

Here's an example:

Project Setup

Let's create a new Flutter project in the terminal:



# New Flutter project
$ flutter create proxyprovider

# Open in VS Code
$ cd proxyprovider && code .

We'll then need to add the provider dependency to our pubspec.yaml:



dependencies:
  flutter:
    sdk: flutter

  provider: ^4.0.5

That's all the packages we need. You can now open the project up on the platform of your choice.

Login

The first thing we'll do is create our LoginForm. In our example we're using it to gather a username to be greeted on the HomePage:



///lib/presentation/widgets/login_form.dart
import 'package:flutter/material.dart';
import 'package:proxyprovider/domain/entities/user.dart';

class LoginForm extends StatefulWidget {
  final Function(User) onFormSaved;

  const LoginForm({Key key, @required this.onFormSaved}) : super(key: key);

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

class _LoginFormState extends State<LoginForm> {
  bool _autoValidate;

  GlobalKey<FormState> _formKey;

  TextEditingController _usernameTextEditingController;
  TextEditingController _passwordTextEditingController;

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

    _autoValidate = false;

    _formKey = GlobalKey<FormState>();

    _usernameTextEditingController = TextEditingController();
    _passwordTextEditingController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      autovalidate: _autoValidate,
      child: Column(
        children: [
          TextFormField(
              controller: _usernameTextEditingController,
              decoration: InputDecoration(labelText: "Username"),
              validator: (String value) =>
                  _validateFormField(value, "Username")),
          TextFormField(
              controller: _passwordTextEditingController,
              obscureText: true,
              decoration: InputDecoration(labelText: "Password"),
              validator: (String value) =>
                  _validateFormField(value, "Password")),
          FlatButton(
            onPressed: _onLoginPressed,
            child: Text("Login"),
          )
        ],
      ),
    );
  }

  _onLoginPressed() {
    setState(() {
      _autoValidate = true;
    });

    if (_formKey.currentState.validate()) {
      widget.onFormSaved(
        User(
          username: _usernameTextEditingController.text,
        ),
      );
    }
  }

  String _validateFormField(String value, String fieldName) {
    if (value.isEmpty) {
      return "$fieldName cannot be empty.";
    }

    return null;
  }

  @override
  void dispose() {
    _usernameTextEditingController.dispose();
    _passwordTextEditingController.dispose();

    super.dispose();
  }
}

Our User entity will be extremely bare. It'll have one property - username:



///lib/domain/entities/user.dart
import 'package:flutter/foundation.dart';

class User {
  final String username;

  User({@required this.username});
}

We can then create our LoginPage which will use the LoginForm:



///lib/presentation/pages/login_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:proxyprovider/application/services/user_service.dart';
import 'package:proxyprovider/domain/entities/user.dart';
import 'package:proxyprovider/presentation/pages/home_page.dart';
import 'package:proxyprovider/presentation/widgets/login_form.dart';

class LoginPage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (BuildContext context) => LoginPage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LoginForm(
              onFormSaved: (User user) => _onFormSaved(context, user),
            ),
          ],
        ),
      ),
    );
  }

  _onFormSaved(BuildContext context, User user) {
    Provider.of<UserService>(context, listen: false).setUser(user);
    Navigator.of(context).pushReplacement(HomePage.route());
  }
}

A review of what we've got so far:

We've got the ability to capture a User object from our LoginForm
Our LoginPage shows the form, and when the onFormSaved callback is fired we're calling UserService.setUser(user) and navigating to the HomePage.

Services

We haven't created the UserService or the HomePage to support this use case. Let's do that now:

UserService

Our UserService will be a simple class that is able to set and get the current user:



///lib/application/services/user_service.dart
import 'package:proxyprovider/domain/entities/user.dart';

class UserService {
  User _user;
  User get user => _user;

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

We can update main.dart to add our UserService as a Provider:



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:proxyprovider/application/services/user_service.dart';
import 'package:proxyprovider/presentation/pages/login_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider(
          create: (_) => UserService(),
        ),
      ],
      child: MaterialApp(
        title: 'ProxyProvider',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          brightness: Brightness.dark,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: LoginPage(),
      ),
    );
  }
}

GreetingService

Our GreetingService will take a UserService in as a parameter and we'll use ProxyProvider to inject this with the latest value from our UserService:



///lib/application/services/greeting_service.dart
import 'package:flutter/foundation.dart';
import 'package:proxyprovider/application/services/user_service.dart';

class GreetingService {
  GreetingService({@required UserService userService})
      : _userService = userService;

  UserService _userService;

  String get greeting => "Hello, ${_userService.user.username}";
}

ProxyProvider

Now that we've got both our services, we can update our providers list inside of main.dart to return the GreetingService as a Provider with the latest value from UserService:



MultiProvider(
  providers: [
    Provider(
      create: (_) => UserService(),
    ),
    ProxyProvider<UserService, GreetingService>(
      update: (BuildContext context, UserService userService,
              GreetingService greetingService) =>
          GreetingService(userService: userService),
    ),
  ],
 //

This means that we're now able to access the value of GreetingService as a Provider and we can be assured that any time our UserService updates, our GreetingService will be updated to match.

We can see this in our HomePage:



///lib/presentation/pages/home_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:proxyprovider/application/services/greeting_service.dart';

class HomePage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (BuildContext context) => HomePage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: Text(
          Provider.of<GreetingService>(context).greeting,
        ),
      ),
    );
  }
}

Whatever we typed inside of our LoginForm as a username will now appear in the Center of our HomePage:

Multiple Injections

What if we have more than one item that we want to inject as a ProxyProvider? As of now we're only injecting the UserService, but there may be times when we want to add more than one object.

For this we have to do the same as before, but use ProxyProvider2, ProxyProvider2, ProxyProvider3, and so on.

Here's an example of how this may look with the use of ProxyProvider2:



MultiProvider(
  providers: [
    Provider(
      create: (_) => UserService(),
    ),
    ProxyProvider<UserService, GreetingService>(
      update: (BuildContext context, UserService userService,
              GreetingService greetingService) =>
          GreetingService(userService: userService),
    ),
    ProxyProvider2<UserService, GreetingService, CartService>(
      update: (BuildContext context, UserService userService,
              GreetingService greetingService, CartService cartService) =>
          CartService(
        userService: userService,
        greetingService: greetingService,
      ),
    ),
  ],

Our CartService does nothing interesting:



import 'package:flutter/foundation.dart';
import 'package:proxyprovider/application/services/greeting_service.dart';
import 'package:proxyprovider/application/services/user_service.dart';
import 'package:proxyprovider/domain/entities/user.dart';

class CartService {
  CartService({
    @required GreetingService greetingService,
    @required UserService userService,
  }) : _greetingService = greetingService,
        _userService = userService;

  GreetingService _greetingService;
  UserService _userService;

  String get cartGreeting => _greetingService.greeting;
  User get user => _userService.user;
}

If we were to update our HomePage to instead use our CartService, it'd look like this:



///lib/presentation/pages/home_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:proxyprovider/application/services/cart_service.dart';

class HomePage extends StatelessWidget {
  static Route<dynamic> route() => MaterialPageRoute(
        builder: (BuildContext context) => HomePage(),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              Provider.of<CartService>(context).user.username,
            ),
            Text(
              Provider.of<CartService>(context).cartGreeting,
            ),
          ],
        ),
      ),
    );
  }
}

Summary

In this article we looked at how to get started with ProxyProvider to inject values that can be provided across our widget tree. I hope you found it useful!

I'd love to hear your thoughts in the comments section below!

Code for this article: https://github.com/PaulHalliday/flutter_proxyprovider

UI Design: Sparkline Bar Chart in Flutter (YouTube Studio)

Paul Halliday — Mon, 20 Apr 2020 17:45:49 +0000

In this article we're going to look at how to replicate the Sparkline Bar Chart as seen in the Realtime Views section of the YouTube Studio application. This is quite a common chart and represents datasets at a small scale, allowing you to see results at a glance.

Video

Prefer to watch a video? Here's one I made for this article:

Here's an example of the UI we'll be making in comparison to the YouTube Studio application:

NOTE: I'm still learning how to best take advantage of the CustomPainter and Canvas with Flutter and I'm documenting my learning here. I'd love your feedback!

Project Setup

With that in mind - let's make a new Flutter project in the terminal:

# New Flutter project
$ flutter create flutter_sparkline

# Open in VS Code
$ cd flutter_sparkline && code .

We'll then create a new page at presentation/pages/home_page.dart named HomePage:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Hello, Flutter!"),
      ),
    );
  }
}

We can then update our main.dart accordingly:

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/presentation/pages/home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sparkline',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        primaryColor: Colors.black,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Building the Sparkline

In order to build our Sparkline Chart we're going to use the CustomPaint widget which takes a CustomPainter which we'll define as SparklinePainter at lib/presentation/painters/sparkline_painter.dart:

import 'dart:math';

import 'package:flutter/material.dart';

class SparklinePainter extends CustomPainter {
  List<num> data;
  Color color;

  SparklinePainter({@required this.data, this.color});

  @override
  void paint(Canvas canvas, Size size) {
    num index = 0;
    num barSize = size.width / data.length;
    num maxValue = data.reduce(max).toDouble();

    for (num point in data) {
      num barHeight = (size.height * point / maxValue).roundToDouble();

      _drawBar(
        canvas: canvas,
        left: barSize * index,
        top: size.height - barHeight,
        width: barSize,
        height: barHeight,
      );
      index++;
    }
  }

  _drawBar({Canvas canvas, num left, num top, num width, num height}) {
    Paint paint = Paint()
      ..color = color ?? Colors.red
      ..style = PaintingStyle.fill
      ..strokeWidth = 8.0;

    Rect rect = Rect.fromLTWH(left, top, width, height);

    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

We can break the above down by the following steps:

We're getting our initial set-up data such as the barSize (depending on how many data points there are). We're also getting the maxValue from the data points passed in. This will be used to determine our barHeight in a moment.
For a particular list of numerical data (i.e. [1, 2, 3, 4, 5]), firstly, determine the barHeight from a 0-height scale.
Then we're drawing a Rect on screen with our specified coordinates.
Finally, we're incrementing our index in order to move the next Rect along one.

Now that we've got our SparklinePainter, we can use this inside of our SparklineChart widget:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/presentation/painters/sparkline_painter.dart';

class SparklineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 100,
      child: CustomPaint(
        painter: SparklinePainter(
          color: Color(0xFF00a7cf),
          data: List.generate(
            40,
            (index) {
              Random rnd = Random();
              return rnd.nextInt(20) + 6;
            },
          ),
        ),
      ),
    );
  }
}

This currently generates some fake dummy data using List.generate, but feel free to swap out the data with some of your choosing.

YouTube UI

Now all we need to do is update our HomePage with some crude UI code that represents the top of the YouTube Studio app:

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/sparkline_chart.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: buildAppBar(),
        backgroundColor: Colors.white.withOpacity(0.85),
        body: Column(children: [
          SizedBox(
            height: 8,
          ),
          buildRealtimeSparklineCard(),
        ]),
      ),
    );
  }

  Container buildRealtimeSparklineCard() {
    return Container(
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Realtime views",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                ),
                SizedBox(
                  height: 6,
                ),
                Text(
                  "48 Hours • Estimated views",
                  style: TextStyle(color: Colors.black54, fontSize: 12),
                ),
                SizedBox(
                  height: 6,
                ),
                Text("6,500"),
              ],
            ),
            SparklineChart(),
          ],
        ),
      ),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text("Analytics", style: TextStyle(color: Colors.black)),
          Row(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(6),
                decoration:
                    BoxDecoration(color: Colors.grey, shape: BoxShape.circle),
                child: Text(
                  "24",
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
              ),
              SizedBox(
                width: 14,
              ),
              CircleAvatar(
                maxRadius: 13,
                backgroundImage: NetworkImage(
                  "https://yt3.ggpht.com/a-/AOh14GhB7xAslx6hmlYqG9-NDLyRj8ycHFUn7ypBMXv52Q=s288-c-k-c0xffffffff-no-rj-mo",
                ),
              )
            ],
          )
        ],
      ),
      centerTitle: false,
      brightness: Brightness.light,
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ),
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(40.0),
        child: Column(
          children: <Widget>[
            Divider(
              height: 2,
            ),
            Container(
              margin: EdgeInsets.only(left: 20),
              child: TabBar(
                isScrollable: true,
                indicatorColor: Colors.black,
                tabs: [
                  Tab(
                    child:
                        Text("OVERVIEW", style: TextStyle(color: Colors.black)),
                  ),
                  Tab(
                    child:
                        Text("REVENUE", style: TextStyle(color: Colors.black)),
                  ),
                  Tab(
                    child: Text("DISCOVERY",
                        style: TextStyle(color: Colors.black)),
                  ),
                  Tab(
                    child:
                        Text("AUDIENCE", style: TextStyle(color: Colors.black)),
                  ),
                  Tab(
                    child: Text("INTERACTIVE CONTENT",
                        style: TextStyle(color: Colors.black)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      iconTheme: IconThemeData(color: Colors.black),
      backgroundColor: Colors.white,
    );
  }
}

Here's the final results of our work:

Summary

In this article we looked at how to create a Sparkline chart with the Flutter CustomPainter. I hadn't used the CustomPainter or Flutter Canvas before this, so it was a fun experiment!

I'd love to hear your thoughts on Twitter or in the comments.

Code for this article: https://github.com/PaulHalliday/flutter_sparkline

My Favourite "Top 5" Programming Fonts

Paul Halliday — Mon, 20 Apr 2020 12:23:20 +0000

I often find myself playing around with my editor on the weekend, whenever I get a new machine, or, pretty much anytime I find a new cool font. As it turns out, there's lots of interesting fonts out there that improve day-to-day work experience.

Let's take a look... in no particular order!

Operator Mono

This font is one of the more popular premium fonts (~$200) and is one of my personal favourites. It has custom ligatures and a distinctly cursive style. You can see how it looks in the video below, or by checking it out on the website.

You'll likely find that this font is polarising. Either people love the cursive style or hate it.

It's even been referred to as the Comic Sans of 2018 by one redditor.

I like it, and that's enough for me! :)

Fira Code

Fira Code is a free, open source font that supports ligatures. It's derived from Fira Mono (hence the name) but has additional spicy features.

You can see it in action here:

If you're looking for a free font that's pleasant to read for a long period of time, I'd recommend Fira Code.

If you'd like to sponsor the development of Fira Code, you can do so on GitHub Sponsors!

Cascadia Code

One of the more recent additions to the font world and my favourites list is Cascadia Code.

It was created by Microsoft and is used in the new Windows Terminal.

It's open source and has the SIL OPEN FONT LICENSE, allowing for free use as long as you don't sell it seperately.

I usually use this when I've been looking at Operator Mono for too long... 🤔

MonoLisa

If you're looking for a more affordable premium font, I'd recommend MonoLisa. It supports ligatures, italics, and isn't fatiguing to read for a long period of time.

It was created by Component Driven in Vienna and comes in at $59 for the Personal Edition / $299 for the Professional Edition.

If you're only going to be using this in your editor, then I'd recommend only investigating the Personal Edition.

You can find the optimal settings for your preferred editor of choice in the MonoLisa FAQ.

JetBrains Mono

The final font I'd like to recommend here is JetBrains Mono.

It supports ligatures and italics and was released earlier this year and is a relatively new addition to my list.

It's open source and free for both personal and commercial usage, following the APACHE 2.0 license.

You can get it on the JetBrains Mono site: https://www.jetbrains.com/lp/mono/#how-to-install

Summary

We're fortunate to be living in a time where there's a wealth of choices when it comes to editor customisation.

If you want a fancy premium font you can splash out (I mean, you are looking at this for a large portion of your work week) or you can simply get a free one that's just as good (or subjectively better!).

Building a Top Ten List: Using ReorderableListView to Reorder List Items

Paul Halliday — Fri, 17 Apr 2020 07:27:05 +0000

In this article we'll be looking at how to use ReorderableListView to reorder list items inside of our Flutter applications. The ReorderableListView is part of the Material library and should be used for smaller list(s) without a substantial amount of items.

The ReorderableListView doesn't support the use of a builder method as it uses a SingleChildScrollView under the hood. As a result, you could see performance issue(s) with larger lists - keep this in mind!

Video

Prefer to watch a video? Here's one I recorded for this article:

Project Setup

The project we'll be creating is a simple "Top 10" list where the user can rank a list of items. Here's an example of it in action:

Reorderables!

We'll start by creating a new Flutter project in the terminal:

# New Flutter project
$ flutter create fl_reorderable

# Open in editor
$ cd fl_reorderable && code .

Creating our Top Ten List

Firstly, we'll start off by creating a new Stateful Widget named TopTenList at lib/top_ten_list.dart:

import 'package:flutter/material.dart';

class TopTenList extends StatefulWidget {
  @override
  _TopTenListState createState() => _TopTenListState();
}

class _TopTenListState extends State<TopTenList> {
  List<String> topTenGames = [
    "World of Warcraft",
    "Final Fantasy VII",
    "Animal Crossing",
    "Diablo II",
    "Overwatch",
    "Valorant",
    "Minecraft",
    "Dota 2",
    "Half Life 3",
    "Grand Theft Auto: Vice City"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Top Ten"),
      ),
      body: ReorderableListView(
        onReorder: (int oldIndex, int newIndex) {},
        children: getListItems(),
      ),
    );
  }

  List<ListTile> getListItems() => topTenGames
      .asMap()
      .map((i, item) => MapEntry(i, buildTenableListTile(item, i)))
      .values
      .toList();

  ListTile buildTenableListTile(String item, int index) {
    return ListTile(
      key: ValueKey(item),
      title: Text(item),
      leading: Text("#${index + 1}"),
    );
  }
}

We've established a List<String> which contains our topTenGames (i.e. the data we'll be using to generate our _reorderableListItems). This'll likely be a more complex model on your end, but a String should suffice for our demo.

Go ahead and add the TopTenList Widget to your main.dart file:

import 'package:fl_reorderable/top_ten_list.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ReorderableListView',
      theme: ThemeData(
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: TopTenList(),
    );
  }
}

Reordering Items

You'll be able to initiate the reorder functionality on our TopTenList by holding down (long press tapping) an item within the list. If you attempt to move this either above or below, it won't work and will snap back to its original position.

This is because we haven't implemented the onReorder function. Let's do exactly that!

Add the onReorder function below and update the ReorderableListView to use this:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Top Ten"),
    ),
    body: ReorderableListView(
      onReorder: onReorder,
      children: getListItems(),
    ),
  );
}

void onReorder(int oldIndex, int newIndex) {
  if (newIndex > oldIndex) {
    newIndex -= 1;
  }

  setState(() {
    String game = topTenGames[oldIndex];

    topTenGames.removeAt(oldIndex);
    topTenGames.insert(newIndex, game);
  });
}

This now allows us to directly compare the state of the list depending on whether the user ordered it above or below the current item.

Why does this matter?

Note that if [oldIndex] is before [newIndex], removing the item at [oldIndex] from the list will reduce the list's length by one.

Implementations used by [ReorderableListView] will need to account for this when inserting before [newIndex].

https://chromium.googlesource.com/external/github.com/flutter/flutter/+/v0.8.7/packages/flutter/lib/src/material/reorderable_list.dart

We're then able to remove the item at the oldIndex and replace this with the newIndex, and as we're using setState we're able to trigger a rebuild of the UI. This'll call our getListItems() once more, rendering our new list and surrounding rankings.

Summary

This completes our Top Ten List! We've now got a list that we're able to reorder and display the current ranking. Some possible improvements to this could be:

Give the user an option to create multiple lists with items per list
Allow users to add, remove and edit items in the list
Persist list items to localstorage or shared_preferences

What would you like to see next? I'd love to hear your feedback at https://twitter.com/paulhalliday_io!

Code for this article: https://github.com/PaulHalliday/flutter_top_ten_list

Epic Toasts with FlutterToast

Paul Halliday — Thu, 16 Apr 2020 12:56:22 +0000

fluttertoast is a library that allows you to create Toast popups easily across iOS, Android and Web.

Video

Would you prefer to watch a video instead of reading this article? Here you go:

Project Setup

To get started, we'll go ahead and create a new Flutter project:

# New Flutter project
$ flutter create fl_toast

# Open in editor
$ cd fl_toast && code .

Dependencies

Next up, we'll need to add the fluttertoast dependency to our pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  fluttertoast: ^4.0.1

Showing a Toast

Here's a typical example of the Fluttertoast call that we'll be using:

Fluttertoast.showToast(
  msg: _messageTextEditingController.text,
  timeInSecForIosWeb: 10,
  toastLength: Toast.LENGTH_LONG,
  webShowClose: true,
)

We'll be using a text box and button which displays a toast with the message a user has typed. Our newly created HomePage that does exactly that:

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _messageTextEditingController;

  GlobalKey<FormState> _formKey;

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

    _formKey = GlobalKey<FormState>();
    _messageTextEditingController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Toast"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Form(
          key: _formKey,
          child: Column(children: [
            TextFormField(
              controller: _messageTextEditingController,
            ),
            FlatButton(
              onPressed: () => Fluttertoast.showToast(
                msg: _messageTextEditingController.text,
                timeInSecForIosWeb: 10,
                toastLength: Toast.LENGTH_LONG,
                webShowClose: true,
              ),
              child: Text("Show Toast"),
            )
          ]),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _messageTextEditingController.dispose();
    super.dispose();
  }
}

We'll also need to update the home within our main.dart:

import 'package:fl_toast/presentation/pages/home_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toastie',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

We can configure our toasts even further with various other options as seen here: https://pub.dev/documentation/fluttertoast/latest/

Example on Flutter Web

Summary

Next time you're looking for a library to display toasts inside of your Flutter apps, give fluttertoast a try!

Code for this article: https://github.com/PaulHalliday/fl_toast

Flutter & MobX: Dark/Light Mode Switcher

Paul Halliday — Thu, 16 Apr 2020 07:50:37 +0000

In this article we're going to create a small application that uses Flutter MobX and Provider to toggle between two ThemeData states. We'll look at the following key concepts:

How to change between dark and light mode.
How to create a ThemeStore which will be responsible for firing action(s) and managing observable values.
How to inject the ThemeStore into our Widget tree
How to show a SnackBar based on a reaction between when the application is in dark or light mode.

Project Setup

Let's go ahead and create a new Flutter project and install our required dependencies:

# New Flutter project
$ flutter create mobx_theme

# Open in VS Code
$ cd mobx_theme && code .

Once we've got the project open, we can update pubspec.yaml with the following dependencies and dev_dependencies:

dependencies:
  flutter:
    sdk: flutter

  provider: ^4.0.5
  mobx: ^1.1.1
  flutter_mobx: ^1.1.0
  shared_preferences: ^0.5.6+3

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:
  mobx_codegen: ^1.0.3

Switching Between Dark and Light Mode

Before implementing any state management solutions, how do we switch between dark and light mode? Flutter makes it easy with changes to brightness within a selected ThemeData.

Here's an example of a lightTheme and darkTheme respectively:

  ThemeData get lightTheme => ThemeData(
        primarySwatch: Colors.teal,
        accentColor: Colors.deepPurpleAccent,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Color(0xFFecf0f1),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      );

  ThemeData get darkTheme => ThemeData(
        primarySwatch: Colors.teal,
        accentColor: Colors.tealAccent,
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      );

This only represents a small amount of the overall configurable theming options, and it's encouraged that you come up with your own theme(s) here. :)

Theme Repository

We'll start off by creating an IThemeRepository interface:

/// lib/domain/theme/interfaces/i_theme_repository.dart
import 'package:flutter/material.dart';

abstract class IThemeRepository {
  Future<String> getThemeKey();
  Future<void> setThemeKey(Brightness brightness);
}

We'll then create a ThemeKey class to hold our constant key(s) related to Theme:

class ThemeKey {
  static const String THEME = "theme";
}

In the future, you may want to abstract this functionality out into a Preferences repository as seen in my other article: https://developer.school/how-to-save-data-to-localstorage-shared-prefs-in-flutter-flutter-web/

Our implementation of this can be seen here:

/// lib/infrastructure/theme/datasources/theme_repository.dart
import 'dart:ui';

import 'package:mobx_theme/domain/theme/constants/theme_keys.dart';
import 'package:mobx_theme/domain/theme/interfaces/i_theme_repository.dart';
import 'package:shared_preferences/shared_preferences.dart';

class ThemeRepository implements IThemeRepository {
  @override
  Future<void> setThemeKey(Brightness brightness) async {
    (await SharedPreferences.getInstance()).setString(
      ThemeKey.THEME,
      brightness == Brightness.light ? "light" : "dark",
    );
  }

  @override
  Future<String> getThemeKey() async {
    return (await SharedPreferences.getInstance()).getString(ThemeKey.THEME);
  }
}

Essentially, we're either setting a SharedPreferences value of either light or dark depending on the brightness passed in. We're also able to retrieve this value to set the appropriate theme in the future.

Theme Service

We've now got the ability to save and retrieve theme keys. We can go ahead and create a ThemeService which uses this to return an appropriate theme for our user:

/// lib/application/theme/services/theme_service.dart
import 'package:flutter/material.dart';
import 'package:mobx_theme/domain/theme/interfaces/i_theme_repository.dart';

class ThemeService {
  ThemeService(IThemeRepository themeRepository)
      : _themeRepository = themeRepository;

  IThemeRepository _themeRepository;

  ThemeData get lightTheme => ThemeData(
        primarySwatch: Colors.teal,
        accentColor: Colors.deepPurpleAccent,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Color(0xFFecf0f1),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      );

  ThemeData get darkTheme => ThemeData(
        primarySwatch: Colors.teal,
        accentColor: Colors.tealAccent,
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      );

  Future<ThemeData> getTheme() async {
    final String themeKey = await _themeRepository.getThemeKey();

    if (themeKey == null) {
      await _themeRepository.setThemeKey(lightTheme.brightness);

      return lightTheme;
    } else {
      return themeKey == "light" ? lightTheme : darkTheme;
    }
  }

  Future<ThemeData> toggleTheme(ThemeData theme) async {
    if (theme == lightTheme) {
      theme = darkTheme;
    } else {
      theme = lightTheme;
    }

    await _themeRepository.setThemeKey(theme.brightness);
    return theme;
  }
}

Next up, we'll use this service inside of our ThemeStore to handle reactivity on these value(s):

Theme Store

The Store will be responsible for exposing our current theme to our MaterialApp. We've also created a computed getter for isDark which we can use at any point to determine whether we're currently in dark mode.

/// lib/application/theme/store/theme_store.dart
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:mobx_theme/application/theme/services/theme_service.dart';

part 'theme_store.g.dart';

class ThemeStore extends _ThemeStore with _$ThemeStore {
  ThemeStore(ThemeService themeService) : super(themeService);
}

abstract class _ThemeStore with Store {
  _ThemeStore(this._themeService);

  final ThemeService _themeService;

  @computed
  bool get isDark => theme.brightness == Brightness.dark;

  @observable
  ThemeData theme;

  @action
  Future<void> getTheme() async {
    theme = _themeService.lightTheme;
    theme = await _themeService.getTheme();
  }

  @action
  Future<void> toggleTheme() async {
    theme = await _themeService.toggleTheme(theme);
  }
}

As MobX requires some code generation, we'll need to run the build_runner with mobx_codegen. Run the following in your terminal:

$ flutter pub run build_runner build

Providing our Store

We're now able to switch brightness, however, we need to provide our MaterialApp with the current value of our theme. We can do that by using Provider:

///lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx_theme/application/theme/services/theme_service.dart';
import 'package:mobx_theme/application/theme/store/theme_store.dart';
import 'package:mobx_theme/infrastructure/theme/datasources/theme_repository.dart';
import 'package:mobx_theme/presentation/pages/splash_screen.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider<ThemeStore>(
            create: (_) =>
                ThemeStore(ThemeService(ThemeRepository()))..getTheme())
      ],
      child: Consumer<ThemeStore>(
        builder: (_, ThemeStore value, __) => Observer(
          builder: (_) => MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'MobX Theme Switcher',
            theme: value.theme,
            home: SplashPage(),
          ),
        ),
      ),
    );
  }
}

Here we're providing the ThemeStore into our Widget tree and immediately using Consumer to get the current theme.value.

As we've created theme as an @observable using MobX, any changes to theme will be reactive as we've wrapped our MaterialApp in an Observer widget.

Creating our SplashPage

As we're strictly dealing with the ability to change between dark and light mode in this article, I've created one page - SplashPage which has a simple title/subtitle. We're able to switch between dark and light mode by clicking the Floating Action Button:

Here's how we achieve this:

/// lib/presentation/pages/splash_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mobx_theme/application/theme/store/theme_store.dart';
import 'package:provider/provider.dart';

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  ThemeStore themeStore;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    themeStore ??= Provider.of<ThemeStore>(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: themeStore.toggleTheme,
        child: themeStore.isDark
            ? Icon(Icons.brightness_high)
            : Icon(Icons.brightness_2),
      ),
      body: buildSplash(context),
    );
  }

  Widget buildSplash(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: themeStore.isDark
          ? SystemUiOverlayStyle.light
          : SystemUiOverlayStyle.dark,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 20,
            ),
            Text(
              "Foodie",
              style: TextStyle(fontSize: 26),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              "The best way to track your nutrition.",
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

There isn't too much out of the ordinary here. We're getting access to our ThemeStore in didChangeDependencies and using the themeStore.toggleTheme action when our FAB is pressed.

Using MobX Reactions

I can't think of many use cases for this, but what if you wanted to show a Snackbar (or another reaction) whenever the theme has been changed? Here's an example of what this could look like:

This is made easy with MobX. We have to register our ReactionDisposer with the Observable that we want to react against:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mobx/mobx.dart';
import 'package:mobx_theme/application/theme/store/theme_store.dart';
import 'package:provider/provider.dart';

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  ThemeStore themeStore;

  GlobalKey<ScaffoldState> _scaffoldKey;
  List<ReactionDisposer> _disposers;

  @override
  void initState() {
    super.initState();
    _scaffoldKey = GlobalKey<ScaffoldState>();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    themeStore ??= Provider.of<ThemeStore>(context);
    _disposers ??= [
      reaction((fn) => themeStore.isDark, (isDark) {
        _scaffoldKey.currentState?.removeCurrentSnackBar();

        if (isDark) {
          _scaffoldKey.currentState.showSnackBar(SnackBar(
            content: Text("Hello, Dark!"),
          ));
        } else {
          _scaffoldKey.currentState.showSnackBar(SnackBar(
            content: Text("Hello, Light!"),
          ));
        }
      })
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      floatingActionButton: FloatingActionButton(
        onPressed: themeStore.toggleTheme,
        child: themeStore.isDark
            ? Icon(Icons.brightness_high)
            : Icon(Icons.brightness_2),
      ),
      body: buildSplash(context),
    );
  }

  Widget buildSplash(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: themeStore.isDark
          ? SystemUiOverlayStyle.light
          : SystemUiOverlayStyle.dark,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 20,
            ),
            Text(
              "Foodie",
              style: TextStyle(fontSize: 26),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              "The best way to track your nutrition.",
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _disposers.forEach((disposer) => disposer());
    super.dispose();
  }
}

Whenever we register a reaction it returns a ReactionDisposer<T> which can be called to dispose of the reaction. We're only registering one reaction here, but for simplicity sake we've used a List to make it more flexible.

Our application is now able to react to isDark changes.

Summary

In this article we looked at one potential way to implement dynamic theming with MobX. I'd love to hear your thoughts as to how this could be improved and/or any future libraries you'd like me to investigate.

Code for this article: https://github.com/PaulHalliday/mobx_theme

How to Save Data to LocalStorage and SharedPreferences in Flutter

Paul Halliday — Mon, 13 Apr 2020 16:44:13 +0000

In this article we're going to investigate how we can create a simple integration with the localstorage and shared_preferences plugin inside of our Flutter applications. We'll be creating a StorageRepository and StorageService as their own package so we can include them in our other project(s) easily.

Project Setup

Let's create a new Flutter package:

# Create a new package with the --template flag
$ flutter create --template=package my_storage

# Open in editor
$ cd my_storage && code .

We can then head over to pubspec.yaml and add the localstorage package:

dependencies:
  flutter:
    sdk: flutter

  localstorage: ^3.0.1+4

Using `localstorage`

Now that we've got created package and installed localstorage, we can make an abstraction over localstorage in the event that we want to swap this out with another persistence library in the future.

For now, we'll be concerned with two methods: getAll and save:

/// i_local_storage_repository.dart
abstract class ILocalStorageRepository {
  Future getAll(String key);
  Future<void> save(String key, dynamic item);
}

We can now create an implementation of this:

import 'package:localstorage/localstorage.dart';
import 'package:my_storage/i_local_storage_repository.dart';

class LocalStorageRepository implements ILocalStorageRepository {
  final LocalStorage _storage;

  LocalStorageRepository(String storageKey)
      : _storage = LocalStorage(storageKey);

  @override
  Future getAll(String key) async {
    await _storage.ready;

    return _storage.getItem(key);
  }

  @override
  Future<void> save(String key, dynamic value) async {
    await _storage.ready;

    return _storage.setItem(key, value);
  }
}

Great. We've now have a LocalStorageRepository which we can use to save and get data. We still don't want to interface with this repository directly, so we can create a LocalStorageService:

/// local_storage_service.dart
import 'package:flutter/foundation.dart';
import 'package:my_storage/i_local_storage_repository.dart';

class LocalStorageService {
  LocalStorageService(
      {@required ILocalStorageRepository localStorageRepository})
      : _localStorageRepository = localStorageRepository;

  ILocalStorageRepository _localStorageRepository;

  Future<dynamic> getAll(String key) async {
    return await _localStorageRepository.getAll(key);
  }

  Future<void> save(String key, dynamic item) async {
    await _localStorageRepository.save(key, item);
  }
}

This takes in an injected ILocalStorageRepository and allows us to call the contract. Now, providing we use the LocalStorageService directly, we could swap out localstorage for something different (like shared_preferences but our usage would remain the same).

Persisting Counter State

We can see this in action by persisting counter state if we create a new Flutter project:

# New Flutter project
$ flutter create storage_counter

# Open in editor
$ cd my_counter && code .

We can then add our my_storage package in the pubspec.yaml by pointing it to the directory, GitHub repo, or other:

dependencies:
  flutter: 
    sdk: flutter

  my_storage:  
    path: '../my_storage'

In our typical application we'll have a service layer which we can use to call out to our LocalStorageService and our preferred method of persistence. Here's an example of our small CounterService which is able to get the current stored counter state, increment, and decrement:

/// lib/services/counter_service.dart
import 'package:flutter/foundation.dart';
import 'package:my_storage/i_local_storage_repository.dart';
import 'package:my_storage/local_storage_service.dart';

class CounterService {
  final LocalStorageService _localStorageService;
  final String _countKey = "count";

  CounterService({
    @required ILocalStorageRepository localStorageRepository,
  }) : _localStorageService =
            LocalStorageService(localStorageRepository: localStorageRepository);

  Future<int> getCount() async {
    return await _localStorageService.getAll(_countKey) ?? 0;
  }

  Future<int> incrementAndSave(int count) async {
    count += 1;
    await _localStorageService.save(_countKey, count);

    return count;
  }

  Future<int> decrementAndSave(int count) async {
    count -= 1;
    await _localStorageService.save(_countKey, count);

    return count;
  }
}

We can use this if we update our main.dart to contain a new CounterPage at counter_page.dart:

import 'package:flutter/material.dart';
import 'package:storage_counter/pages/counter_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CounterPage(title: "Storage Counter"),
    );
  }
}

Inside of our CounterPage we use a FutureBuilder to get the current count, and otherwise, display a loading indicator. To update our count we get a new count from our CounterService which also saves this to our persistence layer:

import 'package:flutter/material.dart';
import 'package:my_storage/local_storage_repository.dart';
import 'package:storage_counter/services/counter_service.dart';

class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);

  final String title;

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

class _CounterPageState extends State<CounterPage> {
  int _counter;
  CounterService _counterService;

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

    _counter = 0;
    _counterService = CounterService(
        localStorageRepository: LocalStorageRepository("counter.json"));
  }

  Future<void> _incrementCounter() async {
    final int _newCount = await _counterService.incrementAndSave(_counter);

    setState(() {
      _counter = _newCount;
    });
  }

  Future<void> _decrementCounter() async {
    final int _newCount = await _counterService.decrementAndSave(_counter);

    setState(() {
      _counter = _newCount;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            FutureBuilder<int>(
              future: _counterService.getCount(),
              builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                if (snapshot.hasData) {
                  _counter = snapshot.data;

                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: _decrementCounter,
                      ),
                      Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.headline4,
                      ),
                      IconButton(
                        icon: Icon(Icons.add),
                        onPressed: _incrementCounter,
                      ),
                    ],
                  );
                }

                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Swapping out LocalStorage for SharedPreferences

What if we wanted to change our persistence layer? How about using SharedPreferences instead? That's easy enough because of the work we've already done.

Add shared_preferences to your pubspec.yaml on the my_storage package we created earlier:

dependencies:
  flutter:
    sdk: flutter
  localstorage: ^3.0.1+4
  shared_preferences: ^0.5.6+3

Creating a `SharedPreferencesRepository`

We can then create a SharedPreferencesRepository which uses SharedPreferences instead:

import 'package:my_storage/i_local_storage_repository.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SharedPreferencesRepository implements ILocalStorageRepository {
  @override
  Future getAll(String key) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getInt(key);
  }

  @override
  Future<void> save(String key, item) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.setInt(key, item);
  }
}

Notice how we're implementing our ILocalStorageRepository here, which contains our two key methods. Here are a couple of points to consider at this stage:

The name ILocalStorageRepository could lend itself to being too tied to the localstorage package if we looked at it from this lense. I feel it's still general enough at this stage, but it's certainly a consideration.
Our ILocalStorageRepository contract is not representative of the SharedPreferences implementation, as we're using getInt and setInt for this demonstration. Consider making this more general to account for other data type(s) if changing your persistence layer is likely required in the near future.

Let's swap out our LocalStorageRepository for the SharedPreferencesRepository in our CounterPage:

class _CounterPageState extends State<CounterPage> {
  int _counter;
  CounterService _counterService;

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

    _counter = 0;
    _counterService = CounterService(
      localStorageRepository: SharedPreferencesRepository(),
    );
  }

  //
}

If we try and increment our counter, you'll notice that things work exactly how they did before:

We can even display this in another way... using both persistence layers at once!

import 'package:flutter/material.dart';
import 'package:my_storage/local_storage_repository.dart';
import 'package:my_storage/shared_preferences_repository.dart';
import 'package:storage_counter/services/counter_service.dart';

class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);

  final String title;

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

class _CounterPageState extends State<CounterPage> {
  int _sharedPreferencesCounter;
  int _localStorageCounter;

  CounterService _sharedPreferencesCounterService;
  CounterService _localStorageCounterService;

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

    _localStorageCounter = 0;
    _sharedPreferencesCounter = 0;

    _sharedPreferencesCounterService = CounterService(
      localStorageRepository: SharedPreferencesRepository(),
    );
    _localStorageCounterService = CounterService(
      localStorageRepository: LocalStorageRepository("counter.json"),
    );
  }

  Future<void> _incrementCounter(bool useSharedPrefs) async {
    final int _newCount = useSharedPrefs
        ? await _sharedPreferencesCounterService
            .incrementAndSave(_sharedPreferencesCounter)
        : await _localStorageCounterService
            .incrementAndSave(_localStorageCounter);

    _updateCount(useSharedPrefs, _newCount);
  }

  Future<void> _decrementCounter(bool useSharedPrefs) async {
    final int _newCount = useSharedPrefs
        ? await _sharedPreferencesCounterService
            .decrementAndSave(_sharedPreferencesCounter)
        : await _localStorageCounterService
            .decrementAndSave(_localStorageCounter);

    _updateCount(useSharedPrefs, _newCount);
  }

  void _updateCount(bool useSharedPrefs, int count) {
    setState(() {
      useSharedPrefs
          ? _sharedPreferencesCounter = count
          : _localStorageCounter = count;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            _buildSharedPreferencesCounter(),
            _buildLocalStorageCounter()
          ],
        ),
      ),
    );
  }

  FutureBuilder<int> _buildSharedPreferencesCounter() {
    return FutureBuilder<int>(
      future: _sharedPreferencesCounterService.getCount(),
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (snapshot.hasData) {
          _sharedPreferencesCounter = snapshot.data;

          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.remove),
                onPressed: () => _decrementCounter(true),
              ),
              Text(
                '$_sharedPreferencesCounter',
                style: Theme.of(context).textTheme.headline4,
              ),
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () => _incrementCounter(true),
              ),
            ],
          );
        }

        return CircularProgressIndicator();
      },
    );
  }

  FutureBuilder<int> _buildLocalStorageCounter() {
    return FutureBuilder<int>(
      future: _localStorageCounterService.getCount(),
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (snapshot.hasData) {
          _localStorageCounter = snapshot.data;

          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.remove),
                onPressed: () => _decrementCounter(false),
              ),
              Text(
                '$_localStorageCounter',
                style: Theme.of(context).textTheme.headline4,
              ),
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () => _incrementCounter(false),
              ),
            ],
          );
        }

        return CircularProgressIndicator();
      },
    );
  }
}

Here's our output:

Yup. Totally not necessary, but a fun experiment nonetheless.

I hope you've found this useful! I'd love to hear your thoughts.

Code:

https://github.com/PaulHalliday/my_storage

https://github.com/PaulHalliday/storage_counter

Ionic 5 and React: Geolocation

Paul Halliday — Wed, 04 Mar 2020 03:04:42 +0000

In this article we'll be looking at how to get the user's current location using the Geolocation plugin alongside our Ionic and React application(s). With this plugin we'll be able to get the user's latitude, longitude , altitude, and so on.

Video

Want to see the video for this article? Check it out below:

New Ionic React project

In order to ensure we're all starting from the same point, run the following inside of your terminal:

$ ionic start ionic_geolocation

? Framework:
> React

? Starter template:
> blank

? Integrate Capacitor
> Y

$ cd ionic_geolocation

$ npm install @ionic-native/core
$ npm install cordova-plugin-geolocation
$ npm install @ionic-native/geolocation

$ ionic cap sync

$ code .

$ ionic serve

This may look like a lot, but here we're essentially:

Creating a new Ionic and React project
Adding the Geolocation plugin
Update web/native capacitor elements
Running a development server at http://localhost:8100

Location

We'll then create ourselves a new GeolocationButton component which can be used to interact with the Geolocation plugin.

This will either display an IonLoading component whilst the Geolocation.getCurrentPosition is being called, show an IonToast with an error message (usually if the user has blocked permissions), or show the current latitude and longitude as the button text:


import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { IonButton, IonLoading, IonToast } from '@ionic/react';
import React, { useState } from 'react';

interface LocationError {
    showError: boolean;
    message?: string;
}

const GeolocationButton: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<LocationError>({ showError: false });
    const [position, setPosition] = useState<Geoposition>();

    const getLocation = async () => {
        setLoading(true);

        try {
            const position = await Geolocation.getCurrentPosition();
            setPosition(position);
            setLoading(false);
            setError({ showError: false });
        } catch (e) {
            setError({ showError: true, message: e.message });
            setLoading(false);
        }
    }

    return (
        <>
            <IonLoading
                isOpen={loading}
                onDidDismiss={() => setLoading(false)}
                message={'Getting Location...'}
            />
            <IonToast
                isOpen={error.showError}
                onDidDismiss={() => setError({ message: "", showError: false })}
                message={error.message}
                duration={3000}
            />
            <IonButton color="primary" onClick={getLocation}>{position ? `${position.coords.latitude} ${position.coords.longitude}` : "Get Location"}</IonButton>
        </>
    );
};

export default GeolocationButton;

We can then add this into Home.tsx like so:

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonGrid,
  IonCol,
  IonRow,
} from "@ionic/react";
import React from "react";
import ExploreContainer from "../components/ExploreContainer";
import "./Home.css";
import GeolocationButton from "../components/GeolocationButton";

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Geolocation</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Geolocation</IonTitle>
          </IonToolbar>
        </IonHeader>

        <div className="container">
          <GeolocationButton />
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

I've added the container class to our button to center it in the middle of IonContent:

.container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

If all goes well, clicking on the button will give us the current latitude and longitude as we expect:

San Fransisco!

Ionic 4: Angular, Vue.js and React

Paul Halliday — Wed, 27 Mar 2019 15:19:17 +0000

This is also published on Ionic Workshop.

If you're looking to make cross platform web applications, you've undoubtedly heard of Ionic Framework. With the latest iteration of Ionic (version 4) we're no longer limited to just using Angular!

Personally, I've been a fan of the Angular ecosystem since the early days of Angular.js, but Ionic have (correctly) recognised that the modern web developer uses a variety of different frontend frameworks.

We'll be creating a basic Ionic application three times, allowing us to investigate the creation of an Ionic project in Angular, Vue and React. After following this article you'll be able to take advantage of Ionic in any framework that you want!

Prior to following this tutorial, ensure you have Node.js installed on your machine.

Installing the Ionic CLI

We can install the Ionic CLI to assist us in making Ionic applications. The Ionic CLI allows us to interact with the various services that Ionic offers, as well as initialise new projects.

Run the following inside of your terminal:

$ npm install -g ionic

With that in mind, let's create our first Ionic application using Angular!

Angular

Project creation with the Ionic CLI is currently just limited to Angular, but in the future I can imagine other templates will be created for Vue, React and others.

Run the following in your terminal to create a new project:

# Start a new Ionic and Angular project based on the blank template
$ ionic start ionic-angular blank

> don't install AppFlow at this stage

# Change directory
$ cd ionic-angular

# Run the project
$ ionic serve

The Ionic CLI already scaffolds out a basic home page for us. If we look inside of src/app/home.page.html, we'll see the following markup:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>

We can then use any Ionic component that we want. Let's make some slight changes to this by adding an ion-card, and adding a color attribute to the ion-toolbar:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Hello, Ionic!</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <img
      src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
    <ion-card-header>
      <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
      <ion-card-title>Look at this view!</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Although, it does look fairly cold.
    </ion-card-content>
  </ion-card>
</ion-content>

Here's the results of doing this:

Pretty sweet! Let's move on to looking at how to do the same with Vue.js.

Vue.js

Adding Ionic to a Vue.js project is simple. We firstly generate a new Vue project with the Vue CLI:

# Ensure you have the Vue.js CLI installed
$ npm install @vue/cli

# Create a new Vue project
$ vue create ionic-vue 

> select default options

# Change directory into ionic-vue
$ cd ionic-vue

# Run the project
$ npm run serve

This creates us a new Vue.js application and opens it inside of our browser. We'll use this application as the basis for our Ionic app:

Installing Ionic Vue

Next up, we need to install Ionic into our project. Back to the command line (in a new terminal window):

$ npm install @ionic/core @ionic/vue vue-router

We've now got Ionic installed into our project. As @ionic/vue is exposed as a Vue.js plugin, we'll need to import this and tell Vue that we'd like to use it with Vue.use. Head over to main.js and do exactly that:

import Vue from 'vue';
import App from './App.vue';

import IonicVue from '@ionic/vue';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';


Vue.config.productionTip = false;

Vue.use(IonicVue);

new Vue({
  render: h => h(App)
}).$mount('#app');

What's happening here?

We're firstly importing IonicVue from @ionic/vue.
Next, we're importing the core Ionic styles from @ionic/core.
Finally, we're registering the IonicVue plugin using Vue.use(IonicVue).

Using Ionic

Now that we've installed and initialised Ionic inside of our Vue.js application, we're able to use Ionic components. Let's head over to App.vue and create the following:

<template>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Hello, Ionic!</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"/>
        <ion-card-header>
          <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
          <ion-card-title>Look at this view!</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Although, it does look fairly cold.
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</template>

<script>


export default {
  name: 'app',
}
</script>

<style>
</style>

This gives us the following Ionic application:

Check out this vue!

Notice how we were able to take the same Ionic content from our Angular application with zero changes. This is the power of Ionic in action!

React

React offers us the same ability to create awesome Ionic projects, but with some minor differences regarding how the components are used.

Similar to Vue, we'll start off with a blank React application and add Ionic onto this with @ionic/core and @ionic/react. We'll be using create-react-app to start our React project. Run the following in your terminal:

# Install create-react-app globally
$ npm install create-react-app -g

# Create a new React project
$ create-react-app ionic-react --typescript

# Change directory
$ cd ionic-react

# Run the project
$ npm start

Installing Ionic

We'll now need to install @ionic/react, @ionic/core and react-router into our React project. Ionic currently depends on react-router, so we'll need to add it even though we're not using the router at this stage.

Run the following in your terminal:

$ npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

Using Ionic

In a similar fashion to our previous examples, we'll start off by importing the relevant CSS files.

Head over to index.tsx and import the following:

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

We can then import individual components such as IonApp, IonHeader, IonContent and so on like so:

import {
  IonApp,
  IonHeader,
  IonContent
} from '@ionic/react';

We can now recreate the previous example of our toolbar and card. Head over to App.tsx and add the following:

import React, { Component } from 'react';

import {
  IonApp,
  IonHeader,
  IonToolbar,
  IonContent,
  IonTitle,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent
} from '@ionic/react';

class App extends Component {
  render() {
    return (
      <IonApp>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Hello, Ionic!</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonCard>
            <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
            <IonCardHeader>
              <IonCardSubtitle>Isn't it great?</IonCardSubtitle>
              <IonCardTitle>Look at this view!</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>Although, it does look fairly cold.</IonCardContent>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}

export default App;

Tada! This gives us the following:

The major difference in the React implementation is the need to import each component individually. Aside from that, the application looks and feels identical to our other implementations!

Conclusion

This article investigated the implementation of an Ionic 4 application by using Angular, Vue and React. You should now feel comfortable using Ionic in a variety of different environments! 🙌

Did you enjoy this article? Let me know on Twitter or at Ionic Workshop!

DEV Community: Paul Halliday

How to Create a BottomNavigationBar with Flutter

New Project

Page Creation

TabPage and BottomNavigationBar

How does IndexedStack work?

Summary

#2 Developing World of Warcraft AddOns - Music Player

New AddOn

Finding Sounds

Registering Slash Commands

Displaying Sounds

Playing Sounds

Stopping Sounds

Summary

#1 Developing World of Warcraft AddOns - Hello World

Creating our WoW Addon

Table of Contents

Hello, World!

Player Name

Slash Command

Summary

How to Use ProxyProvider with Flutter

Project Setup

Login

Services

UserService

GreetingService

ProxyProvider

Multiple Injections

Summary

UI Design: Sparkline Bar Chart in Flutter (YouTube Studio)

Video

Project Setup

Building the Sparkline

YouTube UI

Summary

My Favourite "Top 5" Programming Fonts

Operator Mono

Fira Code

Cascadia Code

MonoLisa

JetBrains Mono

Summary

Building a Top Ten List: Using ReorderableListView to Reorder List Items

Video

Project Setup

Creating our Top Ten List

Reordering Items

Summary

Epic Toasts with FlutterToast

Video

Project Setup

Dependencies

Showing a Toast

Summary

Flutter & MobX: Dark/Light Mode Switcher

Project Setup

Switching Between Dark and Light Mode

Theme Repository

Theme Service

Theme Store

Providing our Store

Creating our SplashPage

Using MobX Reactions

Summary

How to Save Data to LocalStorage and SharedPreferences in Flutter

Project Setup

Using localstorage

Persisting Counter State

Swapping out LocalStorage for SharedPreferences

Creating a SharedPreferencesRepository

Ionic 5 and React: Geolocation

Video

New Ionic React project

Location

Ionic 4: Angular, Vue.js and React

Installing the Ionic CLI

Angular

Vue.js

Using `localstorage`

Creating a `SharedPreferencesRepository`