Forem: Fiifi Pius

Use A Package Like A Pro

Fiifi Pius — Tue, 25 Oct 2022 12:53:20 +0000

As a developer, you will make mistakes when learning something new. I used to make this particular mistake we are going to talk about, till I realized I couldn't live like that.

I see beginners, import packages and start using them everywhere in their project. This makes it difficult when there's a change of package. They will have to touch too many places to get things working. Or, when there's a breaking changes, they go through the same hell.

Now, let's look at using packages the right way

We are going to look a simple package but you can apply this same logic for all kinds of packages.

Create a class or function to handle the package however you want it. This class could be either widget class or a normal class.

Create A Class

This is my class for package_info_plus package which has a function of getting app version.

import 'package:package_info_plus/package_info_plus.dart';

class AppPackageInfo {
  static Future<String> getAppVersion() async {
    final packageInfo = await PackageInfo.fromPlatform();
    return '${packageInfo.version}';
  }
}

You can use it in any widget you like and if in any case you would like to change the package, all you need to do is change it at one place.

class AppVersionScreen extends StatefulWidget {
  const AppVersionScreen({Key? key}) : super(key: key);

  @override
  State<AppVersionScreen> createState() => _AppVersionScreenState();
}

class _AppVersionScreenState extends State<AppVersionScreen> {
  String _appVersion = '';
  void _getAppVersion() async {
    String appVersion = await AppVersion.getAppVersion();
    if (mounted) setState(() => _appVersion = appVersion);
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('$_appVersion'),
    );
  }
}

Let's look at widget package

Say, you want to do a loading effect for your ListViews. You could use a package like shimmer to create a nice loading effect. You don't want to be using this package anywhere in your project.
If there's no support for shimmer package anymore, you have replace it with a similar package like skeleton.

This means you will have to touch places you have shimmer package and replace skeleton.

Instead, create a custom stateless widget and create your Shimmer effect there. Make it highly customizable so it could suit your use cases.

class ShimmerLoadingEffect extends StatelessWidget {
  const ShimmerLoadingEffect({
    Key? key,
    required this.child,
    this.itemCount = 4,
  }) : super(key: key);

  final Widget child;
  final int itemCount;

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey.shade300,
      highlightColor: Colors.grey.shade100,
      child: ListView.builder(
        padding: EdgeInsets.zero,
        itemCount: itemCount,
        itemBuilder: (context, index){
          return child;
        },
      ),
    );
  }
}

This is a simple stateful widget consuming API

class ViewPeopleScreen extends StatefulWidget {
  const ViewPeopleScreen({Key? key}) : super(key: key);

  @override
  State<ViewPeopleScreen> createState() => _ViewPeopleScreenState();
}

class _ViewPeopleScreenState extends State<ViewPeopleScreen> {

List _people = [];

  void _getPeople() async{
    try{

        var response = await _peopleService.fetchPeople();
        if(!mounted) return;
        setState(() => _people = response['data'] );

    } on TimeoutException catch (t) {
      log(t.toString());
    } catch(e){
      log(e.toString());
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return  _people.length == 0 ?
      ShimmerLoadingEffect()
         :
       ListView.builder(
          itemCount: _people.length,
          itemBuilder: (context, index){
          final people = _people[index];
            return Text(people['name'].toString());
          },
       );
  }
}

Take Away

Whenever there's a change to the shimmer package, it will affect one place and one file only. This also allows you to adhere to the DRY principle.

These are just simple examples and this technique applies to a complex use cases as well.

Writing application is hard, and as a beginner, if you don't take care, this little mistakes could frustrate you.

HOW TO USE ON GENERATE ROUTE IN FLUTTER

Fiifi Pius — Wed, 12 Aug 2020 19:44:36 +0000

When I started using routes in flutter I tried to use the simple routing code. When my application started having multiple pages/screens and passing data between screens, then I realized I need a better way. Most flutter try to hack their way just to avoid using on generate route. It seems complex at a glance but very easy grasp when you pay attention to it.

On Generate Route

What the flutter team is saying is, instead of extracting the arguments directly inside the widget, you can also extract the arguments inside an onGenerateRoute() function and pass them to a widget.

Say our app always passes data to LocationScreen

I always to put my route in one file(route_generator.dart) so that it doesn't get mixed up and its a class. So we get the data from final args = settings.arguments; and pass it inside LocationScreen constructor. Refer to the image below

Setting Your Routes

So in the main.dart file I will call my initial route and set to the home screen using the name route not the name widget. I will also set my onGenerateRoute to the route method we created in our route class.

Using Your Route With Arguments

So now we can pass arguments to our target screen through our route. With the route below, the pushNamed takes two parameters: first, for our named route and second, for the data we want to pass to LocationScreen

Creating Constructor In LocationScreen

Create a constructor in the LocationScreen. Make it required if your screen/page is always going to get data which in this case it is.

Accessing data in LocationScreen State

This is where you have to use the fundamental of flutter. Now we will call widget and tap inside to get our weatherData. eg: widget.weatherData.
The LocationScreen object and the LocationScreen state object are linked. The state object knows which statefull widget it belongs to. So the state object has a property call widget which points to its parent.

Take Away

So you could see, on generate route is not difficult after all. The best route approach flutter offers you. So don't be like me back then when I was try to avoid the hard way.

BENEFITS OF REST APIs

Fiifi Pius — Tue, 28 Jul 2020 17:29:03 +0000

As an engineer or developer, it's important to keep up with the latest programming innovations. As with many other API developers, I've opted for a tried-and-true, simplified approach to our data validation APIs that is REST.

The REST architecture generally consists of clients, servers, resources, and a vocabulary of HTTP operations known as request methods. In essence, clients send requests to servers and servers respond. These interactions are centered around representations of resources such as a document or URI. These representations are typically exchanged over a standardized interface such as HTTP. Clients, servers, and other connectors can mediate requests without having to know anything beyond the resource's identifier, required action, and the format of the representation that must be returned such as JSON or XML.

REST uses a standardized set of request methods including: GET, POST, PUT, DELETE, and other existing HTTP capabilities.

EXAMPLE OF REST API

BENEFITS OF REST API

REST is much easier than other approaches such as SOAP which keeps developers from having to reinvent the wheel as far as HTTP request operations go. SOAP also requires separate server and client programs.
REST is based on standard HTTP operations, and it uses verbs with specific meanings such as "get" or "delete" for clarity. Resources are assigned individual URIs, adding flexibility.
With REST, information that is produced and consumed is separated from the technologies that facilitate production and consumption. As a result, REST performs well, is highly scalable, simple, and easy to modify and extend.

WHY I LOVE IT

The thought of writing one back-end code for all your platform applications with easy accessibility, not reinventing the wheel, scalability, extend and modify is a joy for me.

Lets connect @ Twitter
Download this rest api tutorial for a start @ REST API - Github

Taking Advantage Over Flutter Mobile App As Web Developer

Fiifi Pius — Thu, 25 Jun 2020 17:55:22 +0000

Being a software developer is one of the most challenging profession in the world. Technologies changes rapidly since humans want more no matter how much you give them. As a web developer you have to HTML, CSS, JavaScript and any other back-end programming language. We developers always don’t forget their HTML element attributes especially the front end developers. If you are a full stack web developer/front end developer who loves to work APIs and don’t want to worry about learning more languages to keep up with IOS and android then look into flutter.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter uses widgets to create UI. With the use of material designs, you can create beautiful, natively UI for your applications.

Flutter UI Example

But then, flutter comes with a programming language called Dart. Dart is strict type programming language just like the C#, java, etc. So far as you understand programming concept in your preferred language, you can cope with that really fast (well it depends on your ability learn fast).

Dart Code Example

Now look at our traditional HTML and CSS and the flutter Widgets Scripts.

HTML, CSS And Flutter Example

HTML

CSS

FLUTTER

Conclusion

As you can see there are some patterns in there like the font style, font family, color, background image, rows, columns, padding,etc.
The thing is if you know how to write HTML and CSS for web UI taken advantage over flutter will be easy.
It worked for me and I believe it will work for you. The most important thing is to learning the basis of flutter. Apply the knowledge of the front end scripts to the flutter widget and the back-end for dart.

Diving into React useEffect

Fiifi Pius — Mon, 22 Jun 2020 12:51:04 +0000

Introuduction

The first time you used useEffect, it was amazing the work it could do with just one inbuilt function. I began to love it more the the class high-order-components. I got to know more when I had a webinar with Dan Abramov. I then dive more into by follow up on Dan's blog because I wanted to understand.

The Notion

Most developers including me back then, think that when the button is clicked our count state changes and update automatically. Well that might be a useful first intuition when you learn React but it’s not an accurate mental model.

Before you understand how this works, you need to unlearn the class base high-order-component hierarchy and start learning the useEffect ways.

Look at this

In this example, count is just a number. The first time our component renders, the count variable we get from useState() is 0. When we call setCount(1), React calls our component again. This time, count will be 1. And so on.

Whenever we update the state, React calls our component. Each render result “sees” its own counter state value which is a constant inside our function.

It only embeds the {count} number value into the render output. That number is provided by React. When we setCount, React calls our component again with a different count value. Then React updates the DOM to match our latest render output. The key takeaway is that the count constant inside any particular render doesn’t change over time. It’s our component that’s called again and each render “sees” its own count value that’s isolated between renders.

Keep In Mind

So what I am saying is render has it own everything(props,state,handlers,functions). One thing to know that effects run after every render, are conceptually a part of the component output, and “see” the props and state from that particular render.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eddkh09wbu7t2vgfsreg.png)

If I click several times with a small delay, what is the log going to look like? Each one belonging to a particular render and thus with its own count value. You can try it yourself:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j9il5w0m1dgt5696m689.gif)

Lets look at the class implementation

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z7u0wf7rhocext59c1y2.png)

However, this.state.count always points at the latest count rather than the one belonging to a particular render. So you’ll see 5 logged each time instead:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/odqg4mr5gmllc3tdzafy.gif) I hope you get the difference.

Conclusion

React only runs the effects after letting the browser paint. This makes your app faster as most effects don’t need to block screen updates. Effect cleanup is also delayed. The previous effect is cleaned up after the re-render with new props.

Each render is has its own props and state, functions and even even handlers. The key takeaway is that it’s our component that’s called again and each render “sees” its own props and states, function and event handlers that are isolated between renders.

Dive Deeper

To dive deeper, continue reading more Dan's blog has it into details

Connect With Me

Connect with me and lets share ideas that will help developers learning new technologies. Hit me on Twitter