Skip to main content

A simple hello world app in flutter


In Flutter we primarily use widgets. There are all sorts of widgets to look out for and each providing a specific functionality. Flutter allows you to implement various things at ease with the help of widgets.


A simple hello world app in flutter looks like this



import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

MaterialApp Widget allows us to use the material widgets within the application where as scaffold provides additional functionalities such as adding an app bar within the app, adding a floating action button and so on. Scaffold gives us screen space to work on.

Within the Scaffold widget we have a body property. We have passed a Center Widget in the body to make our text centered and we in turn have used the text widget to get the application render text.

So our basic tree is structured as follows.

We will be using MaterialApp and Scaffold almost every time.

->MaterialApp 

    -> Scaffold

        ->Center

            -> Text


The Output of this application is



If you enjoy this post, keep coming. We have got a ton of content for you. Join our mailing list and subscribe to this blog.



Labels:

Popular posts from this blog

All about GridView - Flutter

GridView in Flutter - Learn About GridView In Depth When we need widgets stacked like in a grid, we use GridView. There are two main ways in which you can use a GridView.  First Method, Using GridView.count() GridView.count requires 2 things, the first is cross axis count which tells how many boxes or grids will be there in one row. The second is children property which takes in  a list of widget. Second Method, Using GridView.builder() GridView.builder() takes in various parameters, one is itemCount which takes in number of items we want to display. Other required property is gridDelegate controls the layout of the tiles in gridView and the last property which we will talk about is itemBuilder which is similar to the one used in  List View . itemBuilder takes in a function with two parameters, context and index. context tells where to place the child on screen or basically which context to place the child in and index is a number which runs through 0 to itemCount - 1. If...
Read more

Why should you learn flutter?

Flutter - The next big thing There are many reasons you might want to use flutter for app development, some of the reasons why you might use flutter are listed below. Allows you to make beautiful apps Extremely easy to learn Fast Development and Great Community Support Create Native apps for IOS and Android Lots of API Support at  pub.dev Customise your widgets. Can be used for Web apps and Desktop Apps too! And the most important one, Maintain one codebase. If you are still not convinced to use flutter check out what people have to say about flutter Quora Medium - 1 Medium - 2 All in all, Flutter is the next big thing. If you are into any form of application development you should at least try using flutter. In this blog we will be teaching basics of flutter app development from start to finish. So stay tuned.
Read more

All about ListView

ListView InDepth Review - Flutter When we need widgets stacked up one below another, we use ListView. There are four ways in which you can use a ListView. We will see each of them in use one by one. First Method : Normally Calling ListView widget. class HomePage extends StatefulWidget { @ override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @ override Widget build(BuildContext context) { return Scaffold( body: ListView( children: <Widget>[ Container( color: Colors.red, child: Text( 'Element 1' ), ), Container( color: Colors.blue, child: Text( 'Element 2' ), ), Container( color: Colors.green, child: Text( 'Element 3' ), ), Container( color: Colors.orange, child: Text( 'Element 4' ), ...
Read more