And yet, I see novice programmers spend enormous amounts of time and thought power doing simple tasks that a computer is better at anyways.

Development is about speed, and you can’t write and debug code like a pro without knowing how to use your tools like a pro.

VS Code is full of valuable features that most Devs don't use. In the following lesson, we will go over some of the most useful features of VS Code, so you can save time and build better programs.

Keyboard > Mouse

Firstly, you should try to minimize the time spent navigating with your mouse. That doesn’t mean you need to download a completely mouseless editor (Like Vim), but the more key-binding you use, the faster your development will flow.

Here is a list of some of the most important key bindings I wish I knew as a fresher.

Ctrl X

Programmers need to copy and delete a line of code often. Like this

Luckily, with VS Code, you don’t have to select the entire line! By default, Ctrl X will cut the line of code your cursor is on, allowing you to easily grab a line and move it somewhere else.

Line was cut with Ctrl + X or Cmd + X

☝ This also works with Ctrl + C

But, we can move it even quicker!

Move Line

If you just need to move the lineup or down, you can use Alt + up arrow/down arrow to move the line-up and down, like so!

Commenting with

Comments are crucial, but manually typing in /* */ or // is a real pain!

Luckily, in VS Code, we can use Ctrl + / or Cmd + / to comment or uncomment the selected text!

If you need to comment on a specific line, you can do that with Ctrl + / or CMD + / as well.

Search, Search, Search

The most common? Searching!

For example, you might notice that to find the file, you have to search through your projects directory.

But this is a huge waste of time and energy. With VS Code, you can instantly find the file you’re looking for with CTRL + P or CMD + P.

Watch how I find the file gradient_button_1.dart

This is especially powerful in larger projects, where you might have hundreds of files that you need to navigate.

One of the most time-consuming things you can do is scroll through files searching for a function, or variable, like this:

Instead, you can search through your file with Ctrl + F or Cmd + F. This finds all the instances of what you’re looking for in the file.

You can even navigate to the next found instance with enter, or to the last instance with shift + enter.

Sometimes though, you might not remember the exact name of the symbol you’re looking for. In that case, you can see all the symbols present in your editor by hitting Ctrl + Shift + Period.

💡 A symbol refers to the name of a variable, function, or class that has been defined in your code.

But what if you need to search for something in your entire project? You can do that as well with the Ctrl + P search bar. All you have to do is type in a # before your query.

The key is to use the computer's ability to search things quickly as often as possible. They apply to ANY program. Not only do these techniques help you improve as a developer, but you’ll improve at anything that requires software.

The Commands and the Terminal

Terminals are tricky. While super developers are able to remember a huge array of commands, most of us can rely on the power of the VS Code Command Pallet.

The command pallet is actually within the Ctrl + P or CMD + P search bar you saw earlier. But, we can type a > before our command to search through the available commands.

It’s so important that instead of typing the >, you can automatically open it by using the Ctrl + SHIFT + P

For example, let's search through the commands Flutter provides.

Unfortunately, sometimes VS Code isn’t aware of every available command. We can find extensions that add more, but eventually, we will have to use the terminal.

The good thing is that VS Code’s integrated terminal is awesome! Here are some tips and tricks on how to use it effectively.

You can open an integrated terminal in VS Code quite easily. Either go to the bar at the top and select terminal > new terminal. Or use the key binding ctrl + shift +backtick or cmd + shift +backtick. The easiest way though is to pull up on the bottom of your screen, like so:

Once we’ve opened the terminal, Sometimes we need to create a new terminal. We can do this with the terminal controls in the top right of the terminal area. Hit the + button, and then select the type of terminal you’d like to open, such as Command Prompt or PowerShell on windows.

You can create multiple terminals, split terminals, and organize them with colors. Bonus: investigate these different options, and think of some situations where they might be useful.

Git in VS Code

Because git is SO important, we will cover most of this topic in more detail in our chapter on git. The important takeaway is that VS Code’s built-in git functionality is usually all you need, and it’s easier (and less error-prone) than using the command line.

To access VS Code’s git menu, click the branch icon on the left toolbar of VS-Code

If this doesn’t make any sense, check out the chapter on git for an overview of the fundamentals!

Splitting editors

You often need to work on a system that relies on two files at once. For instance, when you’re writing a widget and simultaneously placing it on a screen. With VS Code, we can simultaneously edit two separate files by “splitting” our editor.

Let's say I’m adding the component GradientButton1 from the file gradient_button_1.dart into my main screen. If I have both my main.dart and the gradient_button_1.dart files open, I can split my editor by dragging one of the tabs to the left or right of my open editor.

Now I can simultaneously edit the widget’s declaration and instantiation

💡 Instantiation - A call to a Function, Widget, or Class that’s already been declared

You can have as many split editors as you’d like, however, I tend to find that on most screens two is more than enough.

Practice. Practice. Practice.

Development is like martial art. If you practice the right techniques, you’ll grow into a coding ninja in no time!

As you progress, make sure you’re deliberately learning new techniques, tricks, and tools that will help you develop faster. Programming is a constantly evolving art form, and you can certainly improve on these techniques. Stay curious!

Takeaways

• VS Code has an incredible set of capabilities. You’re wasting your time if you don’t learn them!

• Your keyboard is faster than your mouse. Learning the key bindings for any program can speed you up significantly

• Whenever possible, stop searching manually and use VS Codes’ built-in search functionality. (Ctrl + P, Ctrl + F, CTRL + SHIFT + P)

• You can open an integrated terminal in VS Code easily.

• Using Git in VS Code is easy, and less error-prone than using the command line

• Practice these skills by making an effort to use them as you develop.

First, make sure you have installed and created an account with MetaMask.

We will be using the testing network: Rinkeby. On your wallet make sure you change to that network on the top right.

To start, create a new Flutter project and add these dependencies to your pubspec.yaml file:

flutter_web3: ^2.1.6

provider: ^6.0.0

We’ll be using flutter_web3 to connect to a chain and provider for state management.

Now, let’s create a MetaMask provider which will be responsible for connecting and holding its current state.

Create a file called metamask_provider.dart

The provider should extend ChangeNotifier so we can update the changes accordingly in the UI.

We will be testing it out on the Rinkeby test network which is represented by the number 4 on the operating chain.

Our connect function will request the MetaMask account via the ethereum global object that the library flutter_web3 provides. If there is an account we will get it and save it to our current address variable. We’ll also save the chain we are operating in and call change notifier to update the UI accordingly.

Make sure to also create a reset function that will reset the current address and the current chain.

And let’s finish off the provider by writing a start function that will be responsible for resetting everything if there is any change in the account or chain.

Awesome. You’re almost done.

Now copy this simple UI so you can test it. This basically uses ChangeNotifierProvider to update the UI based on the connection with MetaMask.

class Web3Home extends StatelessWidget {
  const Web3Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF181818),
      body: ChangeNotifierProvider(
          create: (context) => MetaMaskProvider()..start(),
          builder: (context, child) {
            return Container(
              child: 
                Center(
                  child: Consumer<MetaMaskProvider>(
                    builder: (context, provider, child) {
                      late final String message;
                      if (provider.isConnected && provider.isInOperatingChain) {
                        message = 'Connected';
                      } else if (provider.isConnected &&
                          !provider.isInOperatingChain) {
                        message =
                            'Wrong chain. Please connect to ${MetaMaskProvider.operatingChain}';
                      } else if (provider.isEnabled) {
                        return Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            MaterialButton(
                              onPressed: () =>
                                  context.read<MetaMaskProvider>().connect(),
                              color: Colors.white,
                              padding: const EdgeInsets.all(0),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Image.network(
                                    'https://i0.wp.com/kindalame.com/wp-content/uploads/2021/05/metamask-fox-wordmark-horizontal.png?fit=1549%2C480&ssl=1',
                                    width: 250,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        );
                      } else {
                        message = 'Please use a Web3 supported browser.';
                      }
                      return Text(
                          message,
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white),
                      );
                    },
                  ),
                ),
            );
          }),
    );
  }
}

Unfortunately, MetaMask does not work on debug mode so run your Flutter app using this command:

flutter run -d web-server

This should spawn a server on your local host at some port. Launch it using the browser you have MetaMask on and you should get something like this:

Note: your port will be different

Click on the MetaMask Button:

It should open up a pop-up dialog asking you to connect with one of your accounts. After clicking through the steps you should get a connected message on your app :)

Perfect! Now you have successfully finished the first step in creating an application for Web3.

Thank you for reading! Leave a clap if you enjoyed it and let us know in the comments if you want more tutorials like this.

Learn Flutter where you code: Visit https://sideguide.dev/courses/flutter

Follow us on Instagram!

Important: Only connect your account with apps you trust. Flutter Guide is not responsible for any mistake you make with your crypto/coding endeavors.

What is Dart?

Dart is an object-oriented programming language released by Google to help build modern web, mobile, and desktop applications. It has tons of awesome features that you will learn throughout this course.

Your first Dart project

You can easily create and run your first Dart application with VS Code.

• Press CMD + SHIFT + P on Mac or CTRL + SHIFT + P on Windows

• Choose Dart: New Project

• Select Simple Console Application

• Select a folder where you want the course to be located

• Name your project: dart_application_1

After completing these steps, you should see a whole Dart project set up for you in VS Code:

If you're a complete beginner, it's important to note that a “project” is just a folder on your computer where all the files Dart needs to create your program live. There are many different files, all with different roles and purposes - don't worry if it seems confusing at first.

Where it all begins 🙂

Dart and many other languages have a main() function that is the program's entry point. In technical terms, this is where your program begins executing. Simply put, it's where everything in your app begins.

You can find this function in the dart_application_1.dart file in your /bin directory.

Let's erase everything in this file and create our main function.

The main() function is written in curly brackets ({}). Flutter will run the code in these brackets once your app starts.

void main(){

}

let’s start by printing something to the console with a print statement.

void main(){
    print("Hello World"); //add this line
}

You can use (or call) the function print to print anything. print takes in an object as a parameter (The item that goes inside the parentheses) and prints a String (text) representation of that object. Simply put, it tries to print whatever you put in the parentheses!

In this case, we want to print Hello World, so we write “Hello World” inside print. The quotes are essential - we'll explain why in the coming lesson.

🤔 Try removing the quotes and see what happens. What does your Terminal say?

Let's run the program. 🚀

There are two main ways to run your program:

• Press F5 and VS Code will automatically run your program with the debugger.

  💡 Debugger: A program that assists in detecting and correcting errors in other computer programs.

  💡 Terminal/Console: A terminal is where you can give your program's commands as text, and see what output (or errors) your programs create.

• A more advanced way to start your app is to use your computer's Terminal. To do this, go to the top bar of your VS Code window and press ‘Terminal’ then ‘Create New Terminal,’ which should open a terminal on the bottom of your VS Code window. There, you can type dart run,

• Make sure the Terminal is already inside your project folder. If it is not, navigate using the cd commands. You can learn more about Terminals here

  ❗ The “Terminal” and “Debug Console” are Different! The “Terminal is your computer's Terminal (CMD on Windows, Terminal on Mac). The DEBUG CONSOLE is where the Dart debugger prints output and errors

Voila! You should now see a message popping up displaying in your console: “Hello World.”

Learn Flutter where you code: Visit sideguide.dev/courses/flutter

Takeaways

• You can create a Dart project by pressing CTRL+SHIT/CMD+P and selecting Dart: New Project

• Debug Console and Terminal are 2 different things

• You can run your program using the Debug play button in VS Code or typing dart run in the terminal

Single line Comments

Single line comments are very useful to describe quick snippets of code. Type // and type your comment above the code.

```dart
// Comments out this line!
print(hello);
```

Block Comments

But, what if we we want to comment multiple lines at once? That's where block comments come in;

```dart
/* var cat = "cat";
var dog = "dog";
print(cat == dog); */

notIgnored = "Dragon";
```

❗ Block comments are designed for commenting out code. If you're writing instructions, use single-line comments!

Doc Comments

In larger projects with more people, it's helpful to extract the comments you've written into documentation that can be read somewhere besides the code, like a website. Doing this manually would be annoying! So, Dart gives us a particular type of comment that will be recognized by a special comment extractor later. We can create these comments with three slashes ///

///This variable contains the greeting the program will give the user
String greeting = "Hello Programmer! I'm your trusty computer";

Learn Flutter where you code Visit https://sideguide.dev/courses/flutter