{"id":780,"date":"2023-07-16T12:33:11","date_gmt":"2023-07-16T12:33:11","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=780"},"modified":"2023-07-28T12:43:56","modified_gmt":"2023-07-28T12:43:56","slug":"how-to-create-your-flutter-project-in-vs-code","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/how-to-create-your-flutter-project-in-vs-code\/","title":{"rendered":"How to create your Flutter project in VS Code"},"content":{"rendered":"\n

Launch Visual Studio Code and open the command palette (with\u00a0F1<\/code>\u00a0or\u00a0Ctrl+Shift+P<\/code>\u00a0or\u00a0Shift+Cmd+P<\/code>). Start typing “flutter new”. Select the\u00a0Flutter: New Project<\/strong>\u00a0command.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, select\u00a0Application<\/strong>\u00a0and then a folder in which to create your project. This could be your home directory, or something like\u00a0C:\\src\\<\/code>. Finally, name your project. Something like\u00a0name_app<\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Flutter now creates your project folder and VS Code opens it. You’ll now overwrite the contents of 3 files with a basic scaffold of the app. Copy & Paste the initial app <\/p>\n\n\n\n

In the left pane of VS Code, make sure that\u00a0Explorer<\/strong>\u00a0is selected, and open the\u00a0pubspec.yaml<\/code>\u00a0file.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Replace the contents of this file with the following:<\/p>\n\n\n\n

In pubspec.yaml<\/p>\n\n\n\n

name: namer_app\r\ndescription: A new Flutter project.\r\n\r\npublish_to: 'none' # Remove this line if you wish to publish to pub.dev\r\n\r\nversion: 0.0.1+1\r\n\r\nenvironment:\r\n  sdk: '>=2.19.4 <4.0.0'\r\n\r\ndependencies:\r\n  flutter:\r\n    sdk: flutter\r\n\r\n  english_words: ^4.0.0\r\n  provider: ^6.0.0\r\n\r\ndev_dependencies:\r\n  flutter_test:\r\n    sdk: flutter\r\n\r\n  flutter_lints: ^2.0.0\r\n\r\nflutter:\r\n  uses-material-design: true<\/code><\/pre>\n\n\n\n
The\u00a0pubspec.yaml<\/code>\u00a0file specifies basic information about your app, such as its current version, its dependencies, and the assets with which it will ship.<\/p>\n\n\n\n
Next, open another configuration file in the project,\u00a0analysis_options.yaml<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Replace its contents with the following:<\/p>\n\n\n\n
analysis_options.yaml<\/p>\n\n\n\n
include: package:flutter_lints\/flutter.yaml\r\n\r\nlinter:\r\n  rules:\r\n    prefer_const_constructors: false\r\n    prefer_final_fields: false\r\n    use_key_in_widget_constructors: false\r\n    prefer_const_literals_to_create_immutables: false\r\n    prefer_const_constructors_in_immutables: false\r\n    avoid_print: false<\/code><\/pre>\n\n\n\n
This file determines how strict Flutter should be when analyzing your code. Since this is your first foray into Flutter, you’re telling the analyzer to take it easy. You can always tune this later. In fact, as you get closer to publishing an actual production app, you will almost certainly want to make the analyzer stricter than this. Finally, open the\u00a0main.dart<\/code>\u00a0file under the\u00a0lib\/<\/code>\u00a0directory.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Replace the contents of this file with the following:<\/p>\n\n\n\n
lib\/main.dart<\/p>\n\n\n\n
import 'package:english_words\/english_words.dart';import 'package:flutter\/material.dart';import 'package:provider\/provider.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  const MyApp({super.key});  @override  Widget build(BuildContext context) {    return ChangeNotifierProvider(      create: (context) => MyAppState(),      child: MaterialApp(        title: 'Namer App',        theme: ThemeData(          useMaterial3: true,          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),        ),        home: MyHomePage(),      ),    );  }}class MyAppState extends ChangeNotifier {  var current = WordPair.random();}class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    var appState = context.watch<MyAppState>();    return Scaffold(      body: Column(        children: [          Text('A random idea:'),          Text(appState.current.asLowerCase),        ],      ),    );  }}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Launch Visual Studio Code and open the command palette (with\u00a0F1\u00a0or\u00a0Ctrl+Shift+P\u00a0or\u00a0Shift+Cmd+P). Start typing “flutter new”. Select the\u00a0Flutter: New Project\u00a0command. Next, select\u00a0Application\u00a0and then a folder in which to create… <\/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-780","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/780\/revisions\/787"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}