Hey Friends,
Finally, something new… For the past 2 years we have been seeing a lot about Angular & Angular based technologies (i.e., ionic). In this post let’s talk about a new framework that’s been released by Google for building cross platform native applications.
Google released Flutter Beta 3 yesterday and it was officially announced as ‘production ready’.
Let’s see the basics of it in this post.
A screencast of this post.
Join our flutter community – Click here.
Let’s install flutter onto our systems first.
Visit http://flutter.io and follow the instructions to install the sdk onto your machine.
Once this is done., Visit the marketplace and install the dart code plugin for Visual studio code.
Now open visual studio code and give Ctrl + Shift + P. You would see the below menu
Click on Flutter new Project and then choose a name for your project.
Now in the project directory there would be a lot of folders and files. Open lib/main.dart
This is the crucial file for the project. There would be a lot of demo code already present in the app. Simply remove everything so that it looks like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold(); } } |
The above code is written in Dart. If this is new, no worries., As long as you know any Object Oriented Programming paradigm, you would understand this code perfectly.
Now all we have done is scaffolded out an app in the above code. Connect a device or emulator and hit F5. You would see a blank app. Well, that’s because we haven’t added any code into it right ?
Open up main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Center( child: new Text( 'My First App' ), ), ), body: new Center( child: new Text('Hello World', style: new TextStyle( fontSize: 24.0, color: Colors.red, )), ), ); } } |
Now we have simply added an appBar and a simple text in the center of the screen. Stop the debugging and hit F5 again. You would see a screen as shown below.
Cool right.. Well, we have just scratched the surface of Flutter.
Before we wrap up, let’s just see how to add external assets to our project.
We’ll add an external font. Create a directory called assets in the root of your project directory and paste any font in this directory.
Open up pubspec.yaml file now and add our font in it as shown below.
|
1 2 3 4 |
fonts: - family: bebas-neue fonts: - asset: assets/BebasNeue-Regular.ttf |
Now simply open up main.dart file again and add this font in the TextStyle as shown below.
|
1 2 3 4 5 6 7 |
body: new Center( child: new Text('Hello World', style: new TextStyle( fontFamily: 'bebas-neue', fontSize: 24.0, color: Colors.red, )) |
Now stop the debug and hit F5 again.
Note that since we added a new file we need to rerun the app else whatever changes we did would automatically be reflected using the hot-reload feature.
You would see a screen as shown below.
You could add images as well. Anyway. let’s see more of flutter in our forth-coming posts.
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Join our flutter discussion group and be part of the community – Click here.
Thanks for reading guys. Peace.. 
