How to Create a Simple Application in Flutter?

- Project Location: - Description: Flutter-based simple application Step 5 : Click on the “ Finish ” button and wait for Android Studio to create the project. Step 6 : Once the project is created, you can edit the code to display the output you want. Android Studio will have generated a basic Flutter app. Let’s look at its structure and change the code to suit our needs. Step 7 : Edit the code in the main.dart file. Android Studio has already created most of the files for your app. Now, replace the code in lib/main.dart with the following: main.dart : // Importing important packages require to connect // Flutter and Dart import 'package:flutter/material.dart'; // Main Function void main() { // Giving command to runApp() to run the app. runApp(const MyApp()); } // Widget is used to create UI in flutter framework. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( // title of the application title: 'Hello World Demo Application', // theme of the widget theme: ThemeData( primarySwatch: Colors.lightGreen, ), // Inner UI of the application home: const MyHomePage(title: 'Home page'), ); } } // This class is similar to MyApp instead it // returns Scaffold Widget class MyHomePage extends StatelessWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), backgroundColor: Colors.green, foregroundColor: Colors.white, ), // Sets the content to the // center of the application page body: const Center( // Sets the content of the Application child: Text( 'Welcome to Android Studio!', )), ); } } Output : This code will display a simple app with a green app bar and a message saying ' Welcome to Android Studio! ' Create a New Flutter Project Using Visual Studio Code Visual Studio Code is a lightweight yet powerful code editor that supports Flutter development through its extensions. It's great for developers who prefer a simpler & faster editor without the full weight of an IDE, providing a simple environment for building and running Flutter apps with ease. Step 1 : Open the Visual Studio Code IDE Note : If you prefer using the terminal to create a project, skip to Step 7 and use the command below: $ flutter create flutter_app Replace “ flutter_app ” with your project name Step 2 : Go to View -> Command Palette or press Ctrl + Shift + P to open the Command Palette. Step 3 : Search for and select “ Flutter: New Project .” Step 4 : Choose “ Flutter Application ” as the project type. Step 5 : Choose or create an empty folder where the project will be saved. Step 6 : Enter a name for your project and press Enter. Step 7 : Visual Studio Code will generate all the necessary files for your project. Now, open main.dart located at lib/main.dart in your project folder. Step 8 : Replace the existing code in main.dart with the code below: main.dart : // Importing important packages require to connect // Flutter and Dart import 'package:flutter/material.dart'; // Main Function void main() { // Giving command to runApp() to run the app. // The purpose of the runApp() function is to attach // the given widget to the screen. runApp(const MyApp()); } // MyApp extends StatelessWidget and overrides its // build method. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( // title of the application title: 'Hello World Demo Application', // theme of the widget theme: ThemeData( primarySwatch: Colors.lightGreen, ), // Inner UI of the application home: const MyHomePage(title: 'Home page'), ); } } // This class is similar to MyApp instead it // returns Scaffold Widget class MyHomePage extends StatelessWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), backgroundColor: Colors.green, foregroundColor: Colors.white, ), // Sets the content to the // center of the application page body: const Center( // Sets the content of the Application child: Text( 'Welcome to Visual Studio Code!', )), ); } } Output : This code will display an app with a green app bar and a message saying, ' Welcome to Visual Studio Code! '

Boost Campaign Performance Through Video