•  


Test drive | Flutter

Test drive

What you'll learn

#
  1. How to create a new Flutter app from a sample template.
  2. How to run the new Flutter app.
  3. How to use "hot reload" after you make changes to the app.

These tasks depend on which integrated development environment (IDE) you use.

  • Option 1 explains how to code with Visual Studio Code and its Flutter extension.

  • Option 2 explains how to code with Android Studio or IntelliJ IDEA with its Flutter plugin.

    Flutter supports IntelliJ IDEA Community, Educational, and Ultimate editions.

  • Option 3 explains how to code with an editor of your choice and use the terminal to compile and debug your code.

Choose your IDE

#

Select your preferred IDE for Flutter apps.

Create a sample Flutter app

#
  1. To use the DevTools from VS Code, you need the Dart extension . To easily debug your application you should also install the Flutter extension .

  2. Open the Command Palette.

    Go to View > Command Palette or press + Shift + P .

  3. Type flutter

  4. Select the Flutter: New Project .

  5. When prompted for Which Flutter Project , select Application .

  6. Create or select the parent directory for the new project folder.

  7. When prompted for a Project Name , enter test_drive .

  8. Press Enter .

  9. Wait for project creation to complete.

  10. Open the lib directory, then the main.dart .

    To learn what each code block does, check out the comments in that Dart file.

The previous commands create a Flutter project directory called test_drive that contains a simple demo app that uses Material Components .

Run your sample Flutter app

#

Run your example application on your desktop platform, in the Chrome web browser, in an iOS simulator, or Android emulator.

  1. Open the Command Palette.

    Go to View > Command Palette or press + Shift + P .

  2. Type flutter

  3. Select the Flutter: Select Device .

    If no devices are running, this command prompts you to enable a device.

  4. Select a target device from Select Device prompt.

  5. After you select a target, start the app. Go to Run > Start Debugging or press F5 .

  6. Wait for the app to launch.

    You can watch the launch progress in the Debug Console view.

After the app build completes, your device displays your app.

Starter app on macOS
Starter app on macOS

Try hot reload

#

Flutter offers a fast development cycle with Stateful Hot Reload , the ability to reload the code of a live running app without restarting or losing app state.

You can change your app source code, run the hot reload command in VS Code, and see the change in your target device.

  1. Open lib/main.dart .

  2. Change the word pushed to clicked in the following string. It is on line 109 of the main.dart file as of this writing.

    Original New
    'You have pushed the button this many times:' , 'You have clicked the button this many times:' ,
  3. Save your changes: invoke Save All , or click Hot Reload lightning bolt .

Your app updates the string as you watch.

Starter app after hot reload
Starter app after hot reload

Create a sample Flutter app

#
  1. Launch the IDE.

  2. To be able to create flutter projects on Android Studio you will need to install the Flutter Plugin and for smart Dart coding assistance that includes code completion, formatting, navigation, intentions, refactorings, and more install the Dart Plugin .

  3. Head back to your IDE start page and Click New Flutter Project at the top of the Welcome to Android Studio dialog.

  4. Under Generators , click Flutter .

  5. Verify the Flutter SDK path value against the Flutter SDK location on your development machine.

  6. Click Next .

  7. Enter test_drive into the Project name field. Your project name should be written in snake case and in lowercase. This follows the Flutter best practices for naming projects.

  8. Set the directory in the Project location field to C:\dev\test_drive on Microsoft Windows or ~/development/test_drive on other platforms.

    If you didn't create that directory before, Android Studio displays a warning that the Directory Does Not Exist . Click Create .

  9. From Project type dropdown, select Application .

  10. Ignore the remaining form fields. You don't need to change them for this test drive. Click Create .

  11. Wait for Android Studio to create the project.

  12. Open the lib directory, then the main.dart .

    To learn what each code block does, check out the comments in that Dart file.

The previous commands create a Flutter project directory called test_drive that contains a simple demo app that uses Material Components .

Run your sample Flutter app

#
  1. Locate the main Android Studio toolbar at the top of the Android Studio edit window.

    Main IntelliJ toolbar

  2. In the target selector , select an Android device for running the app. You created your Android target device in the Install section.

  3. To run your app, make one of the following choices:

    1. Click the run icon in the toolbar.

    2. Go to Run > Run .

    3. Press Ctrl + R .

After the app build completes, your device displays your app.

Starter app on macOS
Starter app on macOS

Try hot reload

#

Flutter offers a fast development cycle with Stateful Hot Reload , the ability to reload the code of a live running app without restarting or losing app state.

You can change your app source code, run the hot reload command in Android Studio, and see the change in your target device.

  1. Open lib/main.dart .

  2. Change the word pushed to clicked in the following string. It is on line 109 of the main.dart file as of this writing.

    Original New
    'You have pushed the button this many times:' , 'You have clicked the button this many times:' ,
  3. Save your changes: invoke Save All , or click Hot Reload lightning bolt .

Your app updates the string as you watch.

Starter app after hot reload
Starter app after hot reload

Create your sample Flutter app

#

To create a new Flutter app, run the following commands in your shell or Terminal.

  1. Run the flutter create command.

    flutter create test_drive
    

    The command creates a Flutter project directory called test_drive that contains a simple demo app that uses Material Components .

  2. Change to the Flutter project directory.

    cd test_drive
    

Run your sample Flutter app

#
  1. To verify that you have a running target device, run the following command.

    flutter devices
    

    You created your target device in the Install section.

  2. To run your app, run the following command.

    flutter run
    

After the app build completes, your device displays your app.

Starter app on macOS
Starter app on macOS

Try hot reload

#

Flutter offers a fast development cycle with Stateful Hot Reload , the ability to reload the code of a live running app without restarting or losing app state.

You can change your app source code, run the hot reload command in VS Code, and see the change in your target device.

  1. Open lib/main.dart .

  2. Change the word pushed to clicked in the following string. It is on line 109 of the main.dart file as of this writing.

    Original New
    'You have pushed the button this many times:' , 'You have clicked the button this many times:' ,
  3. Save your changes.

  4. Type r in the terminal window.

Your app updates the string as you watch.

Starter app after hot reload
Starter app after hot reload
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본