Forem: Ayevbeosa Iyamu

Creating Custom PDFs in Flutter

Ayevbeosa Iyamu — Mon, 07 Oct 2024 22:05:21 +0000

Introduction

PDFs are among the most widely used formats for creating and sharing documents on the internet, thanks to their numerous advantages. This article aims to explore the process of seamlessly creating PDF documents within mobile applications using Flutter, as well as the various customization options available to enhance their functionality and presentation. By understanding these capabilities, you as a developer can improve the user experience and meet diverse document needs effectively.

Setup

To implement this in Flutter, you need to add the pdf and printing dependencies to the pubspec.yaml file.

The printing package is necessary as it enables customization of the PDF output.

dependencies:
   pdf: ^3.11.1
   printing: ^5.13.3

Before proceeding, it is recommended to create a separate Dart file to handle the PDF creation. This is because the pdf package uses its own set of widgets, which may conflict with Flutter's Material widgets. However, if you're comfortable with managing this in the same file, feel free to disregard this suggestion. You can create an import alias like so,

import 'package:pdf/widgets.dart' as pw;

Next, in the file we created, we add the imports and we declare a function that generates the PDF.

import 'dart:typed_data';

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart';
import 'package:printing/printing.dart';

Future<Uint8List> generatePdf() async {
  final pdf = Document();
  pdf.addPage(
     Page(
       build: (context) {
        return Column(
          children: [],
        );
      },
    ),
  );
  return pdf.save();
}

In the code above, an instance of Document is created, representing the PDF document. We then add a page to the document (although multiple pages can be added, we will use only one for this example). The Page widget requires a build parameter, where you can define the UI for how the PDF will appear. This UI is created using Flutter widgets, which I think is really cool.

It's important to note that the widgets used in the build method are from package:pdf/widgets.dart. Although their names and functionality are very similar to the widgets in package:flutter/material.dart, they are distinct.

The final line saves the PDF and returns an unsigned 8-bit integer list, which is essentially a representation of the generated PDF.

Using custom fonts

We can add custom fonts in two ways, either to a specific Text widget or to the theme of the Page.

Firstly, the font has to be added to the project in the assets/fonts directory and then added in the assets section of pubspec.yaml.

Next, we would load the font from the assetBundle.


Future<Uint8List> generatePdf() async {

  final customFont1 = await fontFromAssetBundle(
    'assets/fonts/custom_font_1.ttf',
  );
  final customFont1Bold = await fontFromAssetBundle(
    'assets/fonts/custom_font_1.ttf',
  );
  final customFont2 = await fontFromAssetBundle(
    'assets/fonts/custom_font_2.ttf',
  );

  pdf.addPage(
    Page(
      pageTheme: PageTheme(
        theme: ThemeData.withFont(
          base: customFont1,
          bold: customFont1Bold,
        ),
      ),
      build: (context) {
        return Column(
          children: [
            Text(
              'Creating Custom PDFs in Flutter',
              style: TextStyle(
                // Set specific font
                font: customFont2,
              ),
            ),
          ],
        );
      },
    ),
  );

---

}

What is interesting to note here is, asides setting the base font, you can also set the font for bold, italic and boldItalic.

Adding images

This is very similar to what we did for adding fonts. As usual, we first add the image to our assets/images directory and then to the assets section of pubspec.yaml.

Finally, we include it in the widget.

Future<Uint8List> generatePdf() async {

  final myImage = await imageFromAssetBundle(
    'assets/images/my_image.png',
  );

  pdf.addPage(
    Page(
      build: (context) {
        return Column(
          children: [
            Image(myImage, width: 100, height: 100),
          ],
        );
      },
    ),
  );
---
}

If we have svg images in addition to our png/jpeg images, we can add it like so,

import 'package:flutter/services.dart' show rootBundle;

Future<Uint8List> generatePdf() async {

  final mySvgImage = await rootBundle.loadString('assets/svg/my_svg_image.svg');

  pdf.addPage(
    Page(
      build: (context) {
        return Column(
          children: [
            SvgImage(svg: mySvgImage),
          ],
        );
      },
    ),
  );
---
}

Using Colours

For our final customization, we will look at how to set colours for widgets like Text and Container. The pdf package provides the PdfColor class, which offers various options for representing different colors.


// set RGB color
final white = PdfColor(255, 255, 255);
// set from int in 0xAARRGGBB format
final customColour = PdfColor.fromInt(0xff122D97);
// set from hex string 
final red = PdfColor.fromHex('#FF0000');

// Set a container color to red

---
  pdf.addPage(
    Page(
      build: (context) {
        return Column(
          children: [
            Container(color: red),
          ],
        );
      },
    ),
  );
---

With these steps, you can fully customize your PDF document as needed. From structuring the document layout to styling elements with colours and custom widgets, the pdf and printing packages provide a powerful set of tools to create rich and dynamic PDFs directly within Flutter. Whether you're building reports, invoices, or other types of documents, these tools enable you to design high-quality PDFs directly from your Flutter app.

If you found this helpful, like and share and feel free to drop suggestions and feedback.

Styling Google Maps In Your Flutter App

Ayevbeosa Iyamu — Fri, 10 Nov 2023 08:47:18 +0000

Are you seeking to enhance the look of the Google Maps integration within your Flutter application, either by introducing a more sophisticated appearance or aligning it seamlessly with the overall theme of your application?

In this article, I will show the steps involved in accomplishing this task.

Creating your style

There are two approaches to styling Google Maps: utilizing the Styling Wizard or employing the Google Cloud Console. When opting for the Styling Wizard, the process involves importing the JSON information containing the styling requirements. Conversely, the Cloud Console provides a platform for creating and publishing styles, seamlessly reflecting the changes in your application.

Styling your google maps can be a somewhat daunting task due to the multitude of customization options available.

Each feature on the map can be customised by either changing the geometry or the label element which in turn is customised by fill or stroke properties, which also have separate customisation options like colour and saturation.

The silver lining in this context is that, as you undertake these customizations, the changes are observable in real-time.

Using the Styling Wizard

For the purpose of this article, I will be showing you how to use the Styling Wizard. One of my favourite things about using the Styling Wizard is that there are pre-customised themes available for you to use or build on. For example, if you want to Google Maps to blend with the night theme of your app. You can choose either, Dark, Night or Aubergine.
As stated earlier, the customisations you want to do can be done by changing the properties of either the geometry or label elements. When you are done and satisfised with the outcomes, click on Finish.

Afterwards, you should see this above, the next thing would be to copy the JSON, this is essentially the information about the customisations you've made.

Importing the style

Next thing would be to open your flutter project, ensuring you've already added google_maps_flutter to your project.

Next create a file in your assets directory in your flutter project named map_styles.json and paste the JSON there.
Then add it to the pubspec.yaml file in your project,



# The following section is specific to Flutter packages.
flutter:
  uses-material-design: true

  assets:
    - assets/map_style.json

After you've have added it, run flutter pub get so flutter is aware of this newly added asset.

Adding the style

In your project, this newly created style will be added to the GoogleMap widget.

First, would be to create a GoogleMapController variable that will provide access to the GoogleMap widget, it will enable you to do all sort of fun things, like in this case adding a customised map style.



import 'dart:async';

final Completer<GoogleMapController> _controller = Completer();

Next, create a string that would store the path to your map style. What I would recommend is to load it ahead of time before we eventually use, in initState().



import 'package:flutter/services.dart';

late String _mapStyleString;

@override
void initState() {

 rootBundle.loadString('assets/map_styles/map_style.json').then((string) {
      _mapStyleString = string;
  });
  super.initState();
}

Subsequently, within the GoogleMap widget, add the code responsible for configuring the customized map style.



GoogleMap(
  initialCameraPosition: const CameraPosition(
  target: LatLng(37.43296265331129, -122.08832357078792),
    zoom: 19.151926040649414,
  ),
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
    _controller.future.then((value) {
      value.setMapStyle(_mapStyleString);
    });
  },
)

In the provided code snippet, the GoogleMap style is set within the onMapCreated function, guaranteeing that the map is created before the style is applied.

Finally, run your code and you should see your maps looking good.

For this article, I customised it to blend with the default theme when a new project is created.

And this is the JSON below,



[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ebe3cd"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#523735"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c9b2a6"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#c0d6dd"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#ae8f8f"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dfc5ed"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d9afdf"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a7b93"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#7b77b1"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e2f74"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f1e6"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#3d6eff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#faf7fd"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#a268f8"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#b363e9"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d158e9"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#8c57db"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6e6482"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9afdf"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#83768f"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#e5d0ec"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dcafdf"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#bebad4"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#968d9a"
      }
    ]
  }
]

So next time your product designer brings to you a fancy looking map, you will have nothing to worry about.

If you found this helpful, like and share and feel free to drop suggestions and feedback.

Efficient Type-safe Navigation Using go_router

Ayevbeosa Iyamu — Sat, 04 Nov 2023 16:17:03 +0000

In this article, I will share how I recently used go_router for making type-safe routes for navigation. If you've been using or used go_router, one could argue this is one of the better ways to handle navigation in your flutter application.

If this is your first time, hearing of go_router, I will explain a bit what it is about. go_router, is a declarative routing package that uses url-based API for navigating between different screens. This means the screens have to be declared first using url based patterns before navigation can happen.

Setup

So let us get right into it, first I will add go_router to my pubspec.yaml.

flutter pub add go_router

Route configuration

For this example, I will be using a Todo app that will have three screens,

TodoListScreen
AddTodoScreen
TodoDetailScreen

Then I will create my router configuration

final router = GoRouter(
  debugLogDiagnostics: true,
  initialLocation: '/',
  routes: [],
);

Next, I will add the screens to my go_router configuration as a GoRoute, like so

final router = GoRouter(
  debugLogDiagnostics: true,
  initialLocation: '/todo-list',
  routes: [
    GoRoute(
      path: '/todo-list',
      builder: (context, state) => const TodoListScreen(),
    ),
    GoRoute(
      path: '/add-todo',
      builder: (context, state) => const AddTodoScreen(),
    ),
    GoRoute(
      path: '/todo-detail',
      builder: (context, state) {
        final extra = state.extra as Map<String, dynamic>;
        return const TodoDetailScreen(
          todo: extra['todo']! as Todo,
          userId: extra['userId']! as String,
        );
      },
    ),
  ],
);

We set the initialLocation to the same path as the route of the TodoListScreen, because we want that to be the first screen that is navigated to. The final thing for our setup would be to add the go_router configuration to my main.dart which hosts the MaterialApp.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Todo App',
      routerConfig: router,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
    );
  }
}

Basic navigation

Now that this has been setup, we can navigate to AddTodoScreen, by doing

context.push('/add-todo');

GoRouter.of(context).push('/add-todo');

Both code samples do the same thing, the former is an extension method that called the latter under the hood.

Need for Type-safe

So everything looks fine and you might be wondering why is there need for type-safe routes.
Using a String for our paths makes this error-prone because it can be misspelt and it wouldn't be a compile-time error, instead we would see the error at runtime, which isn't ideal. This happens more often in medium to large production apps where a screen is navigated to from different places in the app.
Also when we pass the extra for TodoDetailScreen, we can't ensure for certainty that the data we pass is going to be what we want.

Making it Type-safe

We can do this by using enums. Using enums would be to ensure we use exactly the same route names throughout our app, this will make our code easier and safer to use.

enum AppRouteInfo {
  todoList(
    path: '/todo-list',
    name: 'todoList',
  ),
  addTodo(
    path: '/add-todo',
    name: 'addTodo',
  ),
  todoDetail(
    path: '/todo-detail',
    name: 'todoDetail',
  );

  final String name;
  final String path;

  const AppRouteInfo({
    required this.name,
    required this.path,
  });
}

So we created an enum that requires a name and a path, this ensures our string paths are set in one place and makes it very easy to refactor and use without any worry of runtime errors from misspelt route paths.

Next we would be creating extension methods that will handle all of our navigation, the idea is to make this the only place in our app that uses go_router directly. This way we can keep our navigation in a separate module/package and let other modules depend on it (If you are using the monorepo approach, this might be a good way to start).

extension RouteMethods on BuildContext {
  void navigateWithArgs<T extends Object>(AppRouteInfo routeInfo, T args) {
    pushNamed(routeInfo.name, extra: args);
  }

  void navigate(AppRouteInfo routeInfo) {
    pushNamed(routeInfo.name);
  }
}

In our extension, we have two methods, one to navigate with arguments and the other to navigate without.

Then we will modify our router configuration to use our enum.

final router = GoRouter(
  debugLogDiagnostics: true,
  initialLocation: AppRouteInfo.todoList.path,
  routes: [
    GoRoute(
      name: AppRouteInfo.todoList.name,
      path: AppRouteInfo.todoList.path,
      builder: (context, state) => const TodoListScreen(),
    ),
    GoRoute(
      name: AppRouteInfo.addTodo.name,
      path: AppRouteInfo.addTodo.path,
      builder: (context, state) => const AddTodoScreen(),
    ),
    GoRoute(
      name: AppRouteInfo.todoDetail.name,
      path: AppRouteInfo.todoDetail.path,
      builder: (context, state) {
        final args = state.extra as TodoDetailScreenArgs;
        return TodoDetailScreen(todoDetailScreenArgs: args);
      },
    ),
  ],
);

Then we also modify our navigation code using the extension route methods.

  void _navigateToAddTodoScreen() {
    context.navigate(AppRouteInfo.addTodo);
  }

  void _navigateToTodoDetailScreen(TodoDetailScreenArgs args) {
    context.navigateWithArgs<TodoDetailScreenArgs>(
      AppRouteInfo.todoDetail,
      args,
    );
  }

With these changes we've implemented our code is safer and more convenient to use.

If you found this helpful, like and share and feel free to drop suggestions and feedback.

Keynotes From #TheAndroidShow: Jetpack Compose

Ayevbeosa Iyamu — Wed, 24 Feb 2021 20:47:46 +0000

Hey Guys, as of today, Jetpack Compose is in Beta! Yes, you heard that right.

Now the Android Developers Team announced this with a YouTube livestream, #TheAndroidShow: Jetpack Compose! where most of the big questions on our minds were answered. So if you missed it or you were present but you still need a refresher, don’t worry, I’ve got you.

Just a heads-up, everything from the Q&A is summarised, but not to worry, you can still get the full resources which I will share at the end and if you know very little about it, you can start from here.

The live Q&A was hosted by Nick Butcher, Anna-Chiara Bellini, Leland Richardson, Clara Bayarri and Amanda Alexander. They answered questions on the following areas;

View Rendering Performance

Compose performs favourably with views and the Jetpack Compose Team has been getting some good metrics during testing.
Still requires a bit of work by the Jetpack Compose Team.
Nothing major to worry about for now.

Integrating with Existing Codebase

It is pretty easy.
Depends on how much of your codebase you want to compose.

Compose Tooling

The latest canary version of Android Studio has support for Jetpack Compose, this means you’ll be able to preview your composables in Android Studio without running a physical device or emulator.
Jetpack Compose supports ConstraintLayout too but things are done much differently.

State Management

The Jetpack Compose Team has no strong opinions on how to manage state this is because it was designed to work with any of the popular existing State Managements like MVI and redux. (They also advise you use what works best for you and your team.)

Tutorials

A lot of tutorials will be made available for developers to use. Currently you can surf the Jepack Compose Pathway and also view several samples of Compose in action.

MotionLayout and Animations

Animations in Compose is completely reworked. I highly recommend you check out the samples.
Little progress has been made integrating MotionLayout, so for now I don’t think we can use it.

Production

Compose is just in Beta, so using it in production is entirely your decision to make but you should be aware of the Trade-offs before rolling out.

Activities & Fragments

They won’t be completely be replaced but we will have less interaction with them. This would be case for existing and new projects.

Lastly, Jetpack Compose is FUN!😄

Thank you all for reading. If this helpful to you, please share and show some love ❤️

As promised, the link to the full resource and everything you need to know about #TheAndroidShow: JetpackCompose

Writing WorkManager Tests

Ayevbeosa Iyamu — Thu, 02 Jul 2020 11:09:06 +0000

According to the Android developer guides, WorkManager is an API that makes it easy to schedule deferrable, asynchronous tasks that are expected to run even if the app exits or the device restarts.

Testing WorkManager

Let's look at a common scenario, assuming I want to backup user data to my server or maybe update the app data. Following the TDD school of thought, we should write the tests first before writing any code. But first, a rough idea of what I want to do before I write the test.
Using the backing up data scenario;

I'd like this to be done periodically
I'd want to be sure the device has an available network connection
The device of user should have sufficient battery or is probably charging.
This task should be _re-doable_, i.e if the network fails, the task will run again.

Looking at these, this is what is referred to as constraints in WorkManager (Kind of like the constraints in the ConstraintLayout)

Now that I have these in mind, I'll add the Gradle dependencies for testing WorkManager and sync.

// Work test dependencies
androidTestImplementation 'androidx.work:work-testing:2.3.4'

I am gonna create a class in the androidTest directory and call it BackupWorkerTest.

Just a side note, tests that do not need the android platform to run but just the JVM are written in the test directory and they are sometimes referred to as local tests, while tests that require the android platform are written in the androidTest directory, these tests can also be referred to as Instrumented tests.

Setup test

Okay, I am gonna add a few lines that will run before our actual test does

private lateinit var context: Context

@Before
fun setup() {
    // init context 
    context = ApplicationProvider.getApplicationContext()
}

Next, I'll create a function to test our worker.

@Test
fun testBackupWorker() {
    val worker = TestListenableWorkerBuilder<BackupWorker>(context).build()
}

BackupWorker class

Now, if we were to run it, it would fail. In fact you should see that red line on IDE. This is because I haven't created my BackupWorker class yet. I am just gonna do that now.

class BackupWorker(appContext: Context, params: WorkerParameters) :
    CoroutineWorker(appContext, params) {

    override suspend fun doWork(): Result {
        // Mock network request
        delay(2000)

        return when(inputData.getInt("ResponseCode", 0)) {
            200 -> Result.success()
            else -> Result.retry()
        }
    }
}

As you've noticed, I am not actually making any request in the doWork() function, instead I called the delay() function that would stall the work for two seconds to mimic a network request.
I am gonna add a few more things to the test function to make it testable, what we have right now is just a call to instantiate the BackupWorker class.

Testing the BackupWorkerClass

The test function will finally look like this

@Test
fun testBackupWorker() {
    val inputData = workDataOf("ResponseCode" to 200)
    val worker = TestListenableWorkerBuilder<BackupWorker>(context, inputData).build()
    runBlocking {
        val result = worker.doWork()
        assertThat(result, `is`(ListenableWorker.Result.success()))
    }
}

Network Failure

As you would expect when there is network failure that the request be made again since it was unsuccessful. This will inadvertently mean that the work failed. One of the Result I can return is Result.retry().
This will tell WorkManager to redo the job. So I will simulate a failed network request response code and see if the test passes.

@Test
fun testBackupWorkerNetworkError() {
    val inputData = workDataOf("ResponseCode" to 404)
    val worker = TestListenableWorkerBuilder<BackupWorker>(context, inputData).build()
    runBlocking {
        val result = worker.doWork()
        assertThat(result, `is`(ListenableWorker.Result.success()))
    }
}

Testing Constraints

Now I have written the tests for testing a Work. Remember I mentioned contraints at the beginning of this article and I will also need to test the Work with these contraints, let me show how I would do that.
Testing Constraints would require a different approach from what I did earlier, I am gonna put these tests in a different test class.

Setup test with constraints

As before, I will need to tell the test class to do a few things before running the actual tests, in case it would look different from what I did earlier.

private lateinit var context: Context

@Before
fun setup() {
    context = ApplicationProvider.getApplicationContext()

    val config = Configuration.Builder()
        .setMinimumLoggingLevel(Log.DEBUG)
        .setExecutor(SynchronousExecutor())
        .build()

    // Initialize WorkManager for testing.
    WorkManagerTestInitHelper.initializeTestWorkManager(context, config)
}

So let me run through this a bit, as before we create a lateinit variable that will needed later in the test, this is pretty similar to what I did before.
What is new here is initialising the WorkManager, WorkManager normally gets initialised but it is done under the hood. Adding an executor will tell the WorkManager to run in a specific thread.

Test BackupWorker With Constraints

For the BackupWorker, there are two constraints we would need to ensure on the user device before running it; a connected network and sufficient battery. Writing the tests for this constraints, we would have something like this below.
However, to simulate these constraints, I used the setAllConstraintsMet() function of the TestDriver.

@Test
fun testBackupWorkerWithConstraints() {
    val inputData = workDataOf("ResponseCode" to 200)

    // Create Constraints
    val constraints = Constraints.Builder()
        // Add network constraint.
        .setRequiredNetworkType(NetworkType.CONNECTED)
        // Add battery constraint.
        .setRequiresBatteryNotLow(true)
        .build()

    // Create Work request.
    val request = OneTimeWorkRequestBuilder<BackupWorker>()
        .setInputData(inputData)
        // Add constraints
        .setConstraints(constraints)
        .build()

    val workManager = WorkManager.getInstance(context)

    workManager.enqueue(request).result.get()
    // Simulate constraints
    WorkManagerTestInitHelper.getTestDriver(context)?.setAllConstraintsMet(request.id)

    val workInfo = workManager.getWorkInfoById(request.id).get()
    assertThat(workInfo.state, `is`(WorkInfo.State.SUCCEEDED))
}

Test BackupWorker Periodically

Like how most backup scenario plays out, it is done periodically. This could be user-defined or static. Remember we can run Work periodically in WorkManager, so it would be nice to test it to.
As with testing the constraints, I will need to simulate the duration between each Work. The TestDriver class also has a function, setPeriodDelayMet() to handle this. What this basically does is to tell the WorkManager testing framework that the duration has been completed.

@Test
fun testPeriodicBackupWorker() {
    val inputData = workDataOf("ResponseCode" to 200)

    // Create Work request.
    val request = PeriodicWorkRequestBuilder<BackupWorker>(1, TimeUnit.DAYS)
        .setInputData(inputData)
        .build()

    val workManager = WorkManager.getInstance(context)

    // Enqueues request.
    workManager.enqueue(request).result.get()

    //  Complete period delay
    WorkManagerTestInitHelper.getTestDriver(context)?.setPeriodDelayMet(request.id)
    // Get WorkInfo and outputData
    val workInfo = workManager.getWorkInfoById(request.id).get()
    // Assert
    assertThat(workInfo.state, `is`(WorkInfo.State.ENQUEUED))
}

Yay! We've come to the end of this article. Feel free to leave suggestions and feedback below.

Link to source code below.

ayevbeosa / TestingWorkManager

How I Discovered the Android Studio Colour Picker Tool.

Ayevbeosa Iyamu — Thu, 14 May 2020 15:06:36 +0000

Hey everyone, I'd like to share something I recently discovered. You may have come across it before or probably, like me you didn't know it existed.

Yes! now to the (not-so) big discovery, it was a normal day of work on Android Studio I was getting frustrated with choosing a colour for the project I was working on and in a moment of brilliance I discovered the colour picker!

Now you're wondering how did this show up, well simple click on the small square colour on the left in your colors.xml file or anywhere you store your colour resource and ta da! the colour picker dialog shows up. One cool thing to note is once you've selected a colour, Android Studio automatically replaces your new colour selection in HEX form which is of course just exactly the format we need.

Well this is looking great! We can also do few things on the colour picker dialog, I am just gonna run through the few I noticed.

You can choose the the level of tint (Material 50 - Material 900) and also from the A-Series (Material A100, A200, A400 & A700).
If Material colours do not do it for you and you are more of an ARGB or RGB person, well Android Studio got you covered.
You can also manually edit the colour in HEX and see how it looks like before saving.
And the old fashioned way of dragging the colour picker is also for your choosing.

And guess what, that's not all. In your other resource files where you reference colours like your styles.xml file or even in any of your layout files, you can choose any colour or even a colour resource you've previously created.

If you found this really helpful, why not share and show some love!

Till we see again 👋.

Using Paystack in Your Android Application

Ayevbeosa Iyamu — Sat, 09 May 2020 15:14:21 +0000

Integrating payments in android applications is pretty common nowadays but it can sometimes be an headache doing this as an app developer. I will be showing you how to use Paystack in your android application, if you are uncertain of which to use or you've decided to use Paystack, well you've come to the right place. This is by no means an air-tight approach, it is just to show the basics and get your app running.

Some preliminaries, I'm using Gradle Build Tools 3.6.3, Kotlin 1.3.71 and Android API level 29.

Alright let's get going.

First we gonna put the Paystack dependencies in our build.gradle file in our app directory and sync, like so.

    // Paystack
    implementation 'co.paystack.android.design.widget:pinpad:1.0.4'
    implementation 'co.paystack.android:paystack:3.0.17'

Next we are gonna edit our layout file to accept input from the user, now this can be styled to your heart's content or your application's need. But I am just gonna use a very simple layout with EditTexts and a Button to accept input and for the user to submit.

Our layout should look like this,

Alright now. Before we continue, you should already have a public test key from Paystack, this is gotten when you register. If you don't already, you can click here to register on Paystack.

After getting the key, go to your AndroidManifest.xml file and paste this there. Note: this should be within the <application> tag.

<meta-data
    android:name="co.paystack.android.PublicKey"
    android:value="YOUR PUBLIC KEY" />

Then at the top-level of your app (this could be your Application class if you extended it or the Activity that is gonna implement the payment), we gonna add this here. This is important and should be called before we do any transaction.

PaystackSdk.setPublicKey("YOUR PUBLIC KEY GOES HERE")

PaystackSdk.initialize(applicationContext)

Next we do we create a function that would validate our user input, I am just gonna write a simple validation function. I wouldn't advise you use this in a production environment, this is just to get you started, it is entirely up to you on how you implement validation for the user card details.

Once we are done with that we create a function that builds a Card object. The Card object is what stores the information from the user's card and we would eventually use it to make a transaction.

Next, we create a function to charge the card and perform the transaction

Looks like we are almost done but before running the function there is one more thing we must do. The Paystack Android SDK uses Retrofit2 and Retrofit2 GSON Converter. Let's navigate straight away to our build.gradle file in our app directory and add these dependencies

  // Retrofit
  implementation 'com.squareup.retrofit2:converter-gson:2.8.1'
  implementation 'com.squareup.retrofit2:retrofit:2.8.1'

We finally call our function in the click listener of the button.

button_perform_transaction.setOnClickListener { 
   performCharge()
}

That should be all. Now to test our code, Paystack provides test details we can use. For the card number use 50606 66666 66666 6666, the CVC use 123 and the month and year can be any date in the future and things should go fine.

Once the button is clicked, if everything goes well you should see a small dark screen asking you to input the PIN, use 1234 and click DONE.

Next on the small dark screen you should see it request for the OTP, use 123456. You should get a Toast telling you the transaction was successful.

Forem: Ayevbeosa Iyamu

Creating Custom PDFs in Flutter

Introduction

Setup

Using custom fonts

Adding images

Using Colours

Styling Google Maps In Your Flutter App

Creating your style

Using the Styling Wizard

Importing the style

Adding the style

Efficient Type-safe Navigation Using go_router

Setup

Route configuration

Basic navigation

Need for Type-safe

Making it Type-safe

Keynotes From #TheAndroidShow: Jetpack Compose

View Rendering Performance

Integrating with Existing Codebase

Compose Tooling

State Management

Tutorials

MotionLayout and Animations

Production

Activities & Fragments

Writing WorkManager Tests

Testing WorkManager

Setup test

BackupWorker class

Testing the BackupWorkerClass

Network Failure

Testing Constraints

Setup test with constraints

Test BackupWorker With Constraints

Test BackupWorker Periodically

ayevbeosa / TestingWorkManager

How I Discovered the Android Studio Colour Picker Tool.

Using Paystack in Your Android Application

ayevbeosa / PaystackAndroidIntegration

Integrate Paystack in your native Android Application

Paystack Android SDK

PaystackHQ / paystack-android

Paystack SDK for Android. Accept payments on Android