{"id":741,"date":"2023-07-25T06:25:05","date_gmt":"2023-07-25T06:25:05","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=741"},"modified":"2023-07-25T06:25:07","modified_gmt":"2023-07-25T06:25:07","slug":"creating-your-first-project-and-running-hello-world-on-the-emulator","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/creating-your-first-project-and-running-hello-world-on-the-emulator\/","title":{"rendered":"Creating Your First Project and Running “Hello World” on the Emulator"},"content":{"rendered":"\n

Create a New Flutter Project<\/p>\n\n\n\n

To create a new Flutter project, run the following command in the terminal.<\/p>\n\n\n\n

flutter create hello_world_app\r\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This command creates a new directory named “hello_world_app” with the necessary files and folder structure for a Flutter project.<\/p>\n\n\n\n
Depending on your chosen IDE (Android Studio or Visual Studio Code), open the “hello_world_app” directory as a Flutter project. Ensure that you have an emulator set up, Open your emulator. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In your IDE, click on the “Run” button (usually a green triangle) to run the app.<\/p>\n\n\n\n
flutter run\r\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will launch the app on the emulator or connected device, and you’ll see the “Hello World” message on the screen.<\/p>\n\n\n\n
Open the main.dart<\/code> file located inside the lib<\/code> folder of your project. You will see the following code:<\/p>\n\n\n\n
import 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      home: Scaffold(\r\n        appBar: AppBar(\r\n          title: Text('Hello World'),\r\n        ),\r\n        body: Center(\r\n          child: Text('Hello World!'),\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n
The main<\/code> function is the entry point of the Flutter app, and it calls runApp()<\/code> to start the application. The MyApp<\/code> class is a StatelessWidget, which means its UI cannot change after it’s built.<\/p>\n\n\n\n
The MaterialApp<\/code> widget sets up the basic material design for the app, and the Scaffold<\/code> widget provides a basic structure for the app, including an AppBar<\/code> and a body<\/code>.<\/p>\n\n\n\n
The Text<\/code> widget inside the Center<\/code> widget displays the “Hello World!” message on the screen.<\/p>\n\n\n\n
Now that you have successfully run your first Flutter app<\/p>\n","protected":false},"excerpt":{"rendered":"
Create a New Flutter Project To create a new Flutter project, run the following command in the terminal. This command creates a new directory named “hello_world_app” with… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-741","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":745,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/741\/revisions\/745"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}