Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!

We spend hours scrolling social media and waste money on things we forget, but won’t spend 30 minutes a day earning certifications that can change our lives.
Master in DevOps, SRE, DevSecOps & MLOps by DevOps School!

Learn from Guru Rajesh Kumar and double your salary in just one year.


Get Started Now!

How to create your Flutter project in VS Code

Launch Visual Studio Code and open the command palette (with F1 or Ctrl+Shift+P or Shift+Cmd+P). Start typing “flutter new”. Select the Flutter: New Project command.

Next, select Application and then a folder in which to create your project. This could be your home directory, or something like C:\src\. Finally, name your project. Something like name_app

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

In the left pane of VS Code, make sure that Explorer is selected, and open the pubspec.yaml file.

Replace the contents of this file with the following:

In pubspec.yaml

name: namer_app
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.19.4 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

The pubspec.yaml file specifies basic information about your app, such as its current version, its dependencies, and the assets with which it will ship.

Next, open another configuration file in the project, analysis_options.yaml.

Replace its contents with the following:

analysis_options.yaml

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

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 main.dart file under the lib/ directory.

Replace the contents of this file with the following:

lib/main.dart

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),
        ],
      ),
    );
  }
}

Related Posts

Fixing the “Could not find PHP executable” Error in Live Server on VS Code

this is a common issue and easy to fix! This guide will walk you through the step-by-step solution to get your PHP files running in the browser….

How to Fix the “npm.ps1 cannot be loaded” Error on Windows When Running npm start

If you’re a developer working with React or any Node.js-based projects, you may have encountered the following error when trying to run npm start in PowerShell on…

Simplify Database Migrations with kitloong/laravel-migrations-generator in Laravel

Laravel provides a powerful migration system that allows developers to easily define and manage database schema changes. However, when working with legacy databases or large projects, manually…

Understanding and Fixing the “Unable to Read Key from File” Error in Laravel Passport

Laravel Passport is a powerful package for handling OAuth2 authentication in Laravel applications. It allows you to authenticate API requests with secure access tokens. However, like any…

How to Generate a GitHub OAuth Token with Read/Write Permissions for Private Repositories

When working with GitHub, you may need to interact with private repositories. For that, GitHub uses OAuth tokens to authenticate and authorize your access to these repositories….

Laravel Error: Target class [DatabaseSeeder] does not exist – Solved for Laravel 10+

If you’re working with Laravel 10+ and run into the frustrating error: …you’re not alone. This is a common issue developers face, especially when upgrading from older…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x