DEV Community: Haider Noor

Creating a custom AppBar in flutter

Haider Noor — Sat, 20 Jun 2020 09:33:52 +0000

Hi!.

TL;DR -> find the source code for this here

So, I've been using flutter for some time now to develop a side project of mine. Like a lot of people, and like you probably will too, I found myself unhappy with some of the default widgets that flutter provides. In this particular case, the AppBar widget.

If you don't know, the AppBar is a widget that sits on the top of screen and usually displays the page tittle, some common actions, and the back arrow or the drawer toggle.

This is what the default looks like.

The problem

I needed a custom AppBar widget that received the screen title as a parameter, had custom colors, custom leading icon, and size. I also didn't want to set these variables every single time I needed an appBar.

After some time reading through several articles on how to make a custom AppBar I was still unsatisfied with the approach that most of the tutorials were suggesting. Most of the articles I found suggested creating a custom widget, like the one below, and adding it to the top of your scaffold body.

class CustomAppBar extends StatelessWidget {
  final String title;

  const CustomAppBar(
    this.title, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    double height =
        (mediaQuery.size.height - mediaQuery.padding.top) * HEADER_HEIGHT;
    return Container(
      height: height,
      child: Row(
        children: <Widget>[
          IconButton(
            color: Colors.black,
            icon: Icon(Icons.chevron_left),
            onPressed: () => Navigator.pop(context),
          ),
          Text(title)
        ],
      ),
    );
  }
}

This approach works well (sort of) but I was unhappy with it because, by doing this, you forfeit a lot, if not all, of the intrinsic features and functions of the default AppBar. For example, using automaticallyImplyLeading (more info here).

Some articles also suggested adding one of the many available custom app bar libraries, but why have to manage another 3rd party library that attends to just a single use case?

My Solution

The principle is: inherit all the default AppBar and override the ones you want to customize. Simple, right?

This was my approach:

Create a CustomAppBar stateless widget, that return the default AppBar, like so:

    class CustomAppBar extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return AppBar(
            );
        }
    }

This will allow us to add our CustomAppBar to the Scaffold in the correct way, which is:

Scaffold(
    appBar: CustomAppBar(SCREEN_TITLE),
        body: //your body here
)

Add your customization to the AppBar, like for example:

return AppBar(
    title: Text(
        title,
        style: TextStyle(color: Colors.black),
    ),
    backgroundColor: Colors.white,
    leading: IconButton(
        icon: Icon(Icons.chevron_left),
        onPressed: () => Navigator.pop(context),
        color: Colors.black,
    ),
);

If you wanted to, you could also set automaticallyImplyLeading here. In this case you would have something that looks like this:

return AppBar(
    title: Text(
        title,
        style: TextStyle(color: Colors.black),
    ),
    backgroundColor: Colors.white,
    automaticallyImplyLeading: true,
);

Theoretically, this should be enough but there is one more step. If you go on your Scaffold and add the CustomAppBar we just created you'll get an error

argument_type_not_assignable -> The argument type 'CustomAppBar' can't be assigned to the parameter type 'PreferredSizeWidget'

This is because Scaffold doesn't actually receive AppBar in its appBar property. Instead in takes in PreferredSizeWidget. So we need an extra step.

Extend PreferredSizeWidget. This is where you set the custom height of your CustomAppBar.

You will have to edit your constructor to account for this change. In the end, you should have something similar to this:


class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
    @override
    final Size preferredSize;

    final String title;

    CustomAppBar(
        this.title,
        { Key key,}) : preferredSize = Size.fromHeight(50.0),
            super(key: key);

    @override
    Widget build(BuildContext context) {
        return AppBar(
            title: Text(
                title,
                style: TextStyle(color: Colors.black),
            ),
            backgroundColor: Colors.white,
            automaticallyImplyLeading: true,
        );
    }
}

conclusion

By doing this I got my custom AppBar with all the customization I wanted without adding any 3rd party library. :) and this is what the end product looks like.

Let me know if you have a better way to do this.

Hug

Open Banking and what it means for African startups

Haider Noor — Thu, 21 Mar 2019 16:08:26 +0000

Hi! Let me jump right into it.

I have been working in the banking/financial industry for about a year now. I have worked in projects related to software development for one of the leading African banks. With that, I gained some insight into the African financial landscape and the concept of open banking was particularly interesting to me.Thus, I decided to have a look at what it is, how it works and, being proudly African, what it means for the rising startups in the African continent.

What is Open Banking?

To understand what Open Banking is we need to understand why it came about.

Before Open Banking, it was found that the banking industry was dominated by the older already established banks and that you, as a new player in the banking arena, had it specially difficult to break through into the industry, much less thrive in it. This meant that customers did not have a lot of choice or control over their money or financial services provider.

Out of this, Open Banking was born.
In 2015, the European Parliament published the revised Payment Services Directive (known as "PSD2") which aims to promote the development and use of innovative new technologies for online and mobile payments. Additionally, in 2016 the UK Competitions and Market Authority mandated that the 9 largest UK banks allowed their data to be accessed by licensed startups, down to the transnational level. A ruling that only came into effect in 2018.

So, what does this all mean?

It means that, through consent given by the customer and properly secured channels, you can access a customers financial information and provide your financial services. This is a great advantage for startups because they will not have to compete with the large banks for customers, sharing the client-base instead. This also enables banks to become ecosystem drivers by acting as a platform on which other businesses can thrive.

How does it work?

Straight forward?? -> public API's.

The banks have published public API's that you can connect to and use to develop your services leveraging off their infrastructure and data.

What does this mean for the African startups?

Greater scalability and customer experience

Speaking from my own experience (in Mozambique), one of the biggest pain points for startups is payment integration. Only recently have we had a local payment gateway (M-Pesa API) available. Before this, most startups had to receive payment outside the app (Cash, transfer, etc) leaving little control over the cash-flow and limiting your scalability.
Of course, there are services like Paygate that can help you out if you are based in South Africa,but if you aren't then you face a much bigger challenge.
Cheaper goods and services

Exposing Open Banking API's can also mean that the goods and services provided by startups can be cheaper and, therefore, more accessible.
By integrating with local banks startups no longer have to be subjected to hefty international transactions fees (like they would if integrated to paypal for example) because transactions are now made locally (within the same market).

But, what are the challenges?

Mainly:

Poor smartphone/technological penetration

It is no secret that the African population is poor. As a consequence, very few have access to smartphones and much less, internet. Africa's internet penetration is about 35%, well below the world average of 54% according to Internet World stats. So if your startup is a smartphone or web app (let's face it, most of them are) your clientele is significantly reduced.
But all is not lost as USSD apps have been revolutionary.
Majority of the population is unbanked.

In addition to a significantly small percentage of the population that have internet access, an even smaller amount have a bank account. According to this study by McKinsey

"Africa’s retail banking penetration stands at just 38 percent of GDP, half the global average for emerging markets"

Meaning that even though you can accept payments, only a few people are actually able to pay.
With Open Banking, financial inclusion no longer has to be driven solely by the Banks, with rising Fintech startups able to participate more actively in the effort.
Poor supporting legislature

Will the African countries adopt PSD2 or something similar? What about Data Protection laws?
A lot of African countries do not have legislature to govern internet transactions and information, but a small amount is starting to recognize the importance of regulation within the internet space. Governing of data and electronically processed transactions is starting to appear in parliaments and starting to be recognized as an important safeguard to the development of what is a new and revolutionary industry.

In spite of the challenges, the future is bright and the road is lit with signs of encouragement.
Let me know what you think.
H