Learn Dart Programming - Build Hello World with Flutter

Please login in order to report media.

  • Uploaded 9 months ago in the category How to programming

    In today’s video we are going to be using this awesome emulator to run our first flutter app.

    You can use other emulators such as GENYMOTION or you can use the android emulator.

    To build flutter apps you need to have the flutter SDK installed.

    I have mine installed in a folder named development.

    Open INTELLIJ and create a new project.

    Select FLUTTER and ensure that the IDE points to the path of the FLUTTER SDK.

    Give your project a name and select JAVA for the ANDROID programming language and SWIFT for the IOS programming language.

    Once everything loads up, you are greeted with code for a demo app.

    This is a very basic app with a button and two text fields.

    Each time you click the button, the counter increases.

    But let’s not get ahead of ourselves.

    We are now starting so let’s delete all of this.

    We will first need an import statement.

    This allows us to use different libraries in our app.

    In this case we want to import the material library.

    Each app must have a main function.

    A function is a series of instructions that are executed when the function is called.

    A function usually begins with the data type it returns, it has a name, input parameters and a series of instructions that must be carried out.

    Inside of the main function we call another function - RUNAPP.

    RUNAPP requires a widget.

    Flutter apps are built using widgets.

    Widgets include:
    • Views
    • Texts
    • Buttons
    • Containers
    • Rows
    • Columns
    • Stacks

    Let’s apply what you have learnt in the last tutorial and create a variable named message.

    We will set message to “Hello World” and we will use this variable in our text.

    We will create a widget inside of RUNAPP and we create one using the new keyword.

    So we are going to pass in the variable and set the text direction and then hit the green play button to run the app.



    You will notice that the hello world appears on the screen but it is in the top right corner.

    So let’s delete this text widget and create a center widget.

    This widget is a container that centers content on the screen.

    If we want to add widgets to this container we must add them as a child if it is one and children if it is more than one.

    We are going to add the same widget as before and run the app.

    This time the text appears in the center of the screen.

    We can add some customization to this text and make it bigger.

    We need to add a style.

    Let’s set the font size to 40 and run the app.

    You will notice that the font size has to be a double.

    Doubles are numbers with a decimal.

    We can even make this bigger by setting the font size to 60.

    [Website]
    https://kodechamp.com/flutter-build-a-hello-world-app/

    [Twitter]
    https://twitter.com/skooltch84

    [Github]
    https://github.com/skooltch84

    [Flutter]
    https://flutter.io

    [Andy Emulator]
    https://www.andyroid.net/

  • learndartprogrammingbuildhelloworldflutter