{"id":15744,"date":"2020-07-06T11:46:56","date_gmt":"2020-07-06T11:46:56","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=15744"},"modified":"2020-09-02T17:49:08","modified_gmt":"2020-09-02T17:49:08","slug":"what-is-flutter-and-how-to-use-it-for-app-development","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/what-is-flutter-and-how-to-use-it-for-app-development\/","title":{"rendered":"What is flutter and how to use it for app development?"},"content":{"rendered":"\n

Flutter<\/a> is Google’s portable UI (user interface) framework for producing modern, native and reactive mobile(Android, iOS) application, Web and desktop from a single codebase.
Flutter is an open-source project hosted on Github<\/a>. It contributed by Google and the community<\/a> . Flutter uses Dart language that compiles to native ARM code and production-ready JavaScript code. <\/p>\n\n\n\n

Flutter is fast, and the rendering runs at 60 fps (frames per second) and 120fps for capable devices. The higher the fps, the smoother the animations and transitions.<\/p>\n\n\n\n

Flutter provides tools to create beautiful and professional-looking applications to the developer and designers. Flutter have the function of hot reload to refresh the application in milliseconds when you are editing the application for adding new features in your existing app or new ones.<\/p>\n\n\n\n

Flutter is built with C, C++, Dart and Skia (2D rendering engine ). Skia works with different types of hardware and software platforms. It is also used by Google Chrome, Chrome OS, Android, Mozilla Firefox and Firefox OS. Skia is sponsored and managed by Google.<\/p>\n\n\n\n

How to setup Flutter environment in Windows ?<\/h4>\n\n\n\n
  1. Installing Flutter SDK from official https:\/\/flutter.dev\/docs\/get-started\/install\/windows<\/a><\/em> <\/li>
  2. Extract file at this location C:\\src<\/strong> in your PC <\/li>
  3. Add the Flutter tool to your path at system environment
    1. copy this location C:\\src\\flutter\\bin<\/strong> <\/li>
    2. open system environment then click on Environment Variables..<\/strong> button<\/li>
    3. Click on Path and then click on Edit Button <\/li>
    4. then click on new button and add C:\\src\\flutter\\bin<\/strong> location and click on Ok => OK => Ok<\/li><\/ol><\/li>
    5. Now open Windows PowerShell or CMD and Run flutter doctor<\/strong> to check every thing working fine or not. <\/li><\/ol>\n\n\n\n
      \"\"
      3-1. Extract Flutter SDK in C Driver under src folder<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
      \"\"
      3-2. Environment Variables.<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
      \"\"
      3-3. Select Path and click on Edit Button.<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
      \"\"
      3-4. Click on New Button and Add Location<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
      \"\"
      4. PowerShell Window to Check Flutter dependencies<\/strong><\/figcaption><\/figure>\n\n\n\n

      After above following steps you have to install Android Studio<\/p>\n\n\n\n

      Install Android Studio<\/h3>\n\n\n\n

      Step 1<\/strong> : Download and install Android Studio<\/a><\/p>\n\n\n\n

      Step 2<\/strong> : after download click on software and go through Android Studio Setup Wizard<\/p>\n\n\n\n

      \"\"
      Android Studio Offical website <\/strong><\/figcaption><\/figure>\n\n\n\n

      Setup your Android Device<\/h3>\n\n\n\n

      Run and Test your flutter app in your android device, you need and Android device running Android 4.1 or Higher.<\/p>\n\n\n\n

      1. Open your Android device Settings<\/li>
      2. go to About Phone<\/strong> and then click on 2-3 times on Build Number<\/strong> (according to different android device setting view can be changed so Click Here<\/a> for detailed about USB Debugging setup)<\/li>
      3. after clicking you will see a popup that you are a developer now.<\/li>
      4. then go back and click on System<\/strong> and click on Developer options<\/strong><\/li>
      5. scroll and see under Debugging Tab a option named USB debugging then click on it.<\/li>
      6. Now connect your Android device<\/em> to PC and you will see a popup in your device , just click on Ok.<\/li>
      7. run flutter doctor<\/em> to see your device is connected or not.<\/li><\/ol>\n\n\n\n
        \"\"
        Step 1<\/strong> : About Phone Button<\/figcaption><\/figure><\/div>\n\n\n\n
        \"\"
        Step 2<\/strong> : About Phone Options<\/figcaption><\/figure><\/div>\n\n\n\n
        \"\"
        Step 3<\/strong> : Developer options<\/figcaption><\/figure><\/div>\n\n\n\n
        \"\"
        Step 4<\/strong> : USB debugging off<\/figcaption><\/figure><\/div>\n\n\n\n
        \"\"
        Step 5:<\/strong> USB debugging on<\/figcaption><\/figure><\/div>\n\n\n\n

        Set up the Android emulator<\/h3>\n\n\n\n

        Test you flutter app in Android Emulator, follow below steps:<\/p>\n\n\n\n

        1. Open Android Studio<\/li>
        2. run any Android Studio Project<\/li>
        3. then click on Tools<\/strong> Menu \u2192<\/strong><\/strong> AVD Manager<\/strong> \u2192<\/strong> Android Virtual Device<\/strong> Manger<\/strong> popup will appear<\/li>
        4. Then click on Create Virtual Device…<\/li>
        5. then a Virtual Device Configuration popup will appear \u2192<\/strong> Select Phone Pixel 2 and click on Next \u2192<\/strong><\/strong> Select Android version Oreo (Android 8.1) \u2192<\/strong> Click on Next Button \u2192<\/strong> Type Your AVD Name \u2192<\/strong> Click On Finish Button<\/li>
        6. After that it will take some time to download the files to setup Android Virtual Device<\/li>
        7. In Android Virtual Device Manager, click Run<\/strong> in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.<\/li><\/ol>\n\n\n\n
          \"\"
          Android Studio Front view<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
          \"\"
          AVD Manager under Tools Menu<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          Set up an Editor<\/h3>\n\n\n\n

          Here i am going to setup a editor Visual Studio Code for code practices. you can also install other editors Like Sublime, IntelliJ IDEA<\/a> and Emacs<\/a> etc.<\/p>\n\n\n\n

          1. Download and Install VS Code<\/a><\/li>
          2. then install plugin flutter and dart to work with Flutter projects.<\/li><\/ol>\n\n\n\n
            \"\"
            VS Code for Windows<\/figcaption><\/figure>\n\n\n\n

            In the above steps you will learn how to setup flutter, Android Studio and Visual Studio Code. After that you can run a flutter project easily. i will show you the hello world app in Flutter to my next blog. Thanks for reading my blog and if you want some help on above blog then comment us. we will help you to solve those issues.<\/p>\n\n\n\n

            References : <\/h4>\n\n\n\n
            1. Flutter Youtube Channel<\/a><\/li>
            2. Google’s Flutter tutorial<\/a><\/li>
            3. VS Code Setup and First app <\/a><\/li>
            4. Flutter Beginner Course<\/a><\/li><\/ol>\n\n\n\n

              <\/p>\n","protected":false},"excerpt":{"rendered":"

              Flutter is Google’s portable UI (user interface) framework for producing modern, native and reactive mobile(Android, iOS) application, Web and desktop from a single codebase. Flutter is an open-source project hosted… <\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[530],"tags":[6204,348,6203,4696],"class_list":["post-15744","post","type-post","status-publish","format-standard","hentry","category-android","tag-android-studio","tag-developer","tag-flutter","tag-google"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=15744"}],"version-history":[{"count":6,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15744\/revisions"}],"predecessor-version":[{"id":16321,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/15744\/revisions\/16321"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=15744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=15744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=15744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}