Flutter Hello World Application

You are currently viewing Flutter Hello World Application
Flutter Hello World Banner

Flutter Hello World Application

Hi Everyone, In this tutorial, we are going to create a simple hello world app in a flutter. In our previous articles, we have explained some basic information about flutter. Now we are going to create our first project in Flutter. Let’s follow all the steps of this tutorial.

Click on New Flutter Project then click on Next.

Flutter Hello World
Flutter Hello World

After that, You will find a screen like an image below, where you can decide which package name you want for your project. Check the below the Image.

Flutter Hello World
Flutter Hello World

Click on Finish, it will create a new project for you. When it completes, you will find an auto-increment number sample project.I have created a Hello World project from that default project. See the below screenshot.

Flutter Hello World
Flutter Hello World

You can find main.dart file code below.

See also  Simple Image Slider in Flutter with Awesome Animation

Full Source Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key? key, required this.title}) : super(key: key);
 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body:Center(child:Text(
       'Hello World',
     ))
   );
 }
}

Now Simply run this code and see output like the below image.

See also  Open Source Material Design Music Player for Flutter

Output

Flutter Hello World Output
Flutter Hello World Output

Visit  https://flutter4u.com/  for getting many advanced-level projects, which may help you for your ongoing project.

Spread the love

Leave a Reply