Where It All Started.

Where It All Started.

Life, Stock Trading, Investments, Business and Startup. Most are programming stuff.

Tag: android

Flutter Series – Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself.

— Leo Tolstoy.

Custom free icons for everyone! Just joking I’m not the one giving.

Joking aside, as I began learning Flutter to develop new apps. I began to wonder, how can I beautify it to almost match the wire frame I’m copying.

There are several things to consider, getting exact dimensions and well crafted image and icons. For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to flutter development environment as well use it in app.

To icon or not to icon?

Manually creating icons from scratch, seems to be a bit daunting. But do not worry as there are tools to create this automatically already.

Meet fluttericon! Just like a father introducing his son to everyone.

Anyways, to create your first set of icons follow the steps below.

  1. First is go to FlutterIcon site.
  2. Create your own set of icons from the different sources or upload a custom one.
  3. You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font.
  4. Extract the downloaded files.
  5. Move the font folder in your flutter project, better if you create an assets folder.
  6. Copy the generated dart file to your flutter lib directory.
  7. View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file.
  8. Import the generated dart to your flutter source on where you want to include the custom icons.
  9. To use the icons inside your flutter project, call it like this Icon(CustomIcons.copyright).

Also check this GitHub repository to know more info and get help PolyIcon.

Conclusion

As for developers tooling, one of the several factors a developer may consider before diving in to a new language. And flutter, has many of those tooling compared to react native. Currently, dart has native first class auto completion and analyzer integrated to VS tools and several other editors.

Its up to you now to decide which programming language you would choose. Be it react native or flutter in developing modern production grade app. See you on the next flutter series.

Hope you guys, enjoyed this article! 🧡❤

Flutter Series – Creating Your First Hello World

When you can’t find the sunshine, be the sunshine!

— Anonymous.

Have you ever dream of building your own app, but think its too hard. Why don’t you try flutter…​

Flutter is a new way to build multi-platform app which is currently backed and develop by Google. Its often compared to react native, but the difference is performance. React Native runs on JavaScript bridge while Flutter on dart bridge. What dart bridge does best is AOT (ahead of time) compiling to native ARM code.

Prerequisites

First of all you need flutter, just follow the steps below in order to run install it.

  • Flutter 1.0

Building Hello World

First we will install flutter, depending on your operating system you could find the details on how to install flutter here. On arch Linux you could find it on AUR repository.

After installing the flutter package. Run flutter doctor to check for any dependency error.

And now we begin, to start a flutter project you need to type in flutter create <project-name>. For example I’m building a hello world project named stocks.

flutter create stocks

The command will create a directory named stocks which contains minimal running app template. What we do first is open the file lib/main.dart using your favorite text editor and rename the app title Flutter Demo to Hello World. Then remove the whole Scaffold block as we will create our own scaffold. After the changes your _MyHomePageState class would look like this.

// ....
class _MyHomePageState extends State<MyHomePage> {
	int _counter = 0;
	
	void _incrementCounter() {
		setState(() {
			_counter++;
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold();
	}
}
// ....

Clean up the unused functions and variable like _counter and _incrementCounter. If your editor has integrated linter and dart analyzer it would complain regarding unused variable. Once cleanup’s done, implement now a centered hello world text by adding body to the scaffold.

class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Center(
				child: Text('Hello World!'),
			),
		);
	}
}

Now run your code using the command flutter run. If a device’s connected it will show an app displaying a centered hello world. You could also use an emulator by running flutter launch before running flutter run.

So what’s next?

Now after everything’s done, we will continue building our stocks monitor app on the next chapter. Stay tuned. Hit like if you like, subs if you love and as always live life.