DEV Community: Oluwatobiloba

Creating a Custom appBar

Oluwatobiloba — Fri, 17 Jul 2020 15:57:02 +0000

😜 Yo!

A couple of days, I was building a simple app that takes data from an API and displays them on the screen. A simple app though.

Then I needed to add some height to my appBar. Well you might suggest

...
toolbarHeight: 100.0,
title: Text('Yo! Title here'),
...

but what if I want to customize my title, add some color, and use the properties across other screens well I don't want to go through the ctrl c & ctrl v kinds of stuff.

Here is what I did

Created a widget directory inside my lib folder
Created a new custom_appBar.dart file

import 'package:flutter/material.dart';

class MyAppbar extends StatelessWidget with PreferredSizeWidget {
  @override
  final String title;
  final Size preferredSize;

  MyAppbar(this.title, {Key key})
      : preferredSize = Size.fromHeight(100.0),
        super(key: key);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title, 
        style: TextStyle(color: Colors.white)
      ),
      backgroundColor: Colors.white38,
    );
  }
}

My new MyAppbar class extend the statelessWidget. you also noticed I have with PreferredSizeWidget right? Yea! this is because the Scaffold takes in a PreferredSizeWidget and not the AppBar class directly.

Then I set my constructor like so

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

Lastly, my build method returns the AppBar class and there I can now set my AppBar properties

Now I can import and reuse my newly customized MyAppbar everywhere on my app

...
appBar: MyAppbar('Title goes here!'),
...

I also recommend checking this medium article too 👍

Flutter: Increase the power of your AppBar & SliverAppBar | by Diego Velasquez | Flutter Community | Medium

Diego Velasquez ・ Jun 8, 2019 ・
Medium

.ltag__tag__id__5 .follow-action-button{ background-color: #41C4FF !important; color: #03589C !important; border-color: #41C4FF !important; }

#dart Follow

On the language, SDK and ecosystem.

How would you tell friends that you're a backend developer?

Oluwatobiloba — Thu, 02 Apr 2020 22:21:01 +0000

Hello,

I realize that it is sometimes difficult to convince friends that you're a backend engineer. Like they always want to see the website you built, and the likes.

So how do you tell them and what are the project you've worked on?

Job Opportunity For Junior Software Developers 💻

Oluwatobiloba — Wed, 31 Jul 2019 14:12:11 +0000

Do you know of any internship program in any tech industries?

If YES, let's share so that intermediate developers can benefit from.

How to be more productive when working on side project 💥💥.

Oluwatobiloba — Sat, 06 Jul 2019 16:28:47 +0000

I would like to know how you guys handle distraction when working on side project 🧐

I really need to know. "cause something isn't working right here 🤷.

🔥 🔥 My Favorite Packages on Atom editor for PHP Development

Oluwatobiloba — Sat, 08 Sep 2018 22:30:54 +0000

Hello guys, this is my first post on dev.to and today, I'll be sharing with you the list of packages, how to install them on your atom text editor giving it a new look and making your coding moment more fascinating and enjoyable.

LET'S GET STARTED 🔥🔥🔥

1. Atom-beautify 😍

Guess what it's one of its kind. Wait are you worried about indentations? 😥 this will save you and make your codes more clean and organized.

to install, press ctrl + alt + T this will open your terminal on ubuntu and probably on Mac Os too, then type or copy the following command apm install atom-beautify to the terminal

2. linter 👌

This provide you with option to view errors in your codes without stress. To install, copy or type apm install linter.

Note You might want to install specific linter for different work and languages you're using

3. Autocomplete-paths

Just as it sounds, it'll autocomplete the missing path. I love this package with my 💕 heart and I can't live without it. funny! 😁

By now, you should know how to install this package apm install autocomplete-paths so simple right??😘

Let's test this out by typing fun (function) and we see this

Hold on, now press enter. You should see the autocomplete working now.

4. File-icons

File icons is a lovely package every atom user must have (sorry not a must but choice)

5. php-cs-fixer

No 1 package. I can't explain why I kept it as the 5th. This is PHP Coding Standards Fixer.

The installation is quiet different from the rest of the package. We need to meet the requirement by making the package available on our path. Sorry for the long story

The following steps will solve it.

Navigate to your terminal
Check if composer is installed by executing composer -v. This will check the version of composer. However, you can follow this link to install composer

You should see the above output if composer is installed

Next, copy and paste $ composer global require friendsofphp/php-cs-fixer to your terminal
Lastly, copy $ export PATH="$PATH:$HOME/.composer/vendor/bin"

Bonus:

Figlet

With figlet, you can convert a selection into ascii-art which is sometimes useful when documentin g.

language-blade

Must have for every Laravel developer

highlight-selected

THE END

Something missing? leave a comment, I can't wait to see other amazing packages