Introduction to flutter for beginners

Introduction to flutter for beginners

Introduction to flutter for beginners
Agenda
1. Self introduction / company introduction
2. What is Flutter?
3. Why I decided to learn Flutter
4. Developed service

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

May 25, 2020
Tweet

Transcript

  1. Introduction to flutter for beginners Takayuki Suzuki

  2. "HFOEB 4FMGJOUSPEVDUJPODPNQBOZJOUSPEVDUJPO 8IBUJT'MVUUFS  8IZ*EFDJEFEUPMFBSO'MVUUFS %FWFMPQFETFSWJDF

  3. 4FMGJOUSPEVDUJPO DPNQBOZJOUSPEVDUJPO

  4. ◆ Name Suzuki Takayuki ◆ Introduction ɾ I was Born

    Kanagawa Prefecture in Japan. ɾI now live in Okinawa. ɾI've been an engineer for 7 years. ɾI run a company in Okinawa. ◆ Hobbies Cosplay, live music, marathon competitions, baseball games Pikkoro 1. Self introduction
  5. 1. Self introduction

  6. Copyright Re:Build.inc All Rights Reserved. ◆ Company name Re: Build

    Co., Ltd. ◆ Address 2-2-2 Kumoji, Naha City, Okinawa Prefecture Times Building ◆ Business description -Planning and development of in-house WEB services. ɾ Contract development ◆ Employees 7 people ◆ How engineers work We recommend free working styles that allow remote work! 1. Company introduction
  7. Copyright Re:Build.inc All Rights Reserved. 7 ·Service name Tadoru https://tadoru.work/

    ɾ System overview Engineer-specific Referral Crowd sourcing 1 Company introduction
  8. Copyright Re:Build.inc All Rights Reserved. 8 This is a programming

    school run by my company.
 
 ·Service name Re: Build Boot Camp https://rebuild-bootcamp.jp/ ·Overview A programming school for those who aim to reach a "business level" in Okinawa and Miyazaki ɾ Technology used Laravel, Vue.js, etc. 1 Company introduction
  9. Copyright Re:Build.inc All Rights Reserved. 9 Business level Beginner Intermediate

    person A school that bridges the gap from beginners to practical level after graduating from a programming school for local beginners 1 Company introduction
  10. Event announcement - Charity Conference Okinawa Online Frontend Edition will

    be held on June 21! - We are also looking for speakers! - Below are examples of presentation themes HTML, CSS, JavaScript, UI, UX, design, accessibility, SPA framework and PWA. https://charity-conf.okinawa.jp/
  11. 8IBUJT'MVUUFS

  12. Flutter allows you to build beautiful native apps on iOS

    and Android from a single codebase. In other words, cross-platform development technology.
 It is a technology that allows you to write a single code and the application will work on both Android and iOS platforms. What is Flutter? https://note.com/heavenosk/n/n245b72973600
  13. Benefits of Flutter Built in an easy-to- understand development language

    The language used by Flutter is called "Dart". Dart originally appeared as an alternative language to JavaScript, and its format is similar to JavaScript. Flexible UI including hot reload If you modify the program contents, it will be reflected on the screen immediately. It has specifications that make it easy to develop without the need to compile. Efficient development with both AOT and JIT compilers During development, hot reloading can be used by the JIT that compiles and converts to machine language at application run time, and after release, AOT that is compiled at build time reduces the load and time required for execution. 1 2 3 https://udemy.benesse.co.jp/development/ios/flutter-intro.html
  14. Dart is a programming language developed by Google for web

    application development. A class-based object-oriented language that can support large-scale application / service development. What is Dart language? https://www.ossnews.jp/oss_info/Dart
  15. Aim for alternatives to JavaScript 
 Dart was designed from

    the perspective of "solving language problems that cannot be solved by the JavaScript language", "excellent performance", "withstanding large- scale project use", and "secure". What is Dart language? https://www.ossnews.jp/oss_info/Dart
  16. Flutter has official development plugins for Android Studio, IntelliJ IDEA

    and Visual Studio Code. You can also use Flutter's command line tools without using a plugin, so you can develop applications with Flutter using your favorite editor. How to use Development Tool? https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
  17. First, download Android Studio from the official Android Studio website.

    https://developer.android.com/studio Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
  18. Install Flutter plugin Install and use the Flutter plugin for

    Android Studio. Select Plugins from Preferences of Android Studio and select Browse repositories at the bottom of the screen. Search the inside of the screen with "flutter", select "Flutter" that is displayed, and install it with the Install button. Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
  19. After installation, please restart Android Studio. After restarting, the menu

    of "Start a new Flutter project" will be displayed on the start screen of Android Studio, so select it. Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
  20. On the New Flutter Project screen, select "Flutter Application" and

    proceed to "Next". Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
  21. 8IZ*EFDJEFEUPMFBSO'MVUUFS

  22. For Example clinent needs
 ɾ First, make a prototype easily

    I want to make it with a native app. ɾ Because I want to make a native application, Can you use Flutter or React Native? ɾ What kind of technology you choose I want to know. And so on. Increased selection of cross-platform technology
  23. But this is front technology Development experience

  24. Which is better, Flutter or React Native? - As you

    can see in the framework comparison table, the two are very similar. - While React Native is designed on top of existing web technologies, Flutter is designed from scratch. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67 Development Language Development Environment Platform UI Application example Flutter Google Dart Android Studio, IntelliJ IDEA, Visual Studio Code iOS, Android, Web, Windows, Mac, Linux Original UI Xianyu, Hamilton, Google Ads React Native Facebook JavaScript, TypeScript Nuclide, Visual Studio Code iOS, Android, Web(Mac, Windows) Native UI Instagram, Facebook, Facebook Ads, Skype, Tesla
  25. UI difference between Flutter and React Native - React Native

    has a native UI, while Flutter has its own. - In other words, React Native apps look different on different platforms, but Flutter apps look more uniform on any platform. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
  26. Flutter engineer and React Native engineer in Japanese recruitment market

    - The impression that there are only a few React Native engineers in Japan.
 - Even if you place an order offshore overseas, the unit price of Flutter engineers is high and the cost does not fit. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
  27. %FWFMPQFETFSWJDF

  28. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO Event Search Event

    Search
  29. Why I decided to Developed There are not many event

    search conditions ...
  30. The iOS app is also not very easy to use.

    Why I decided to Developed
  31. Application overall structure https://connpass.com/ api/v1/event/ API Get event information from

    connpass API
  32. 32 Keyword search Area search Mock Other search conditions are

    being in development.
  33. Connpass API Document There are several search conditions, so we

    are still in development. https://connpass.com/about/api/
  34. development contents App declaration

  35. development contents Information obtained from Connpass Aggregated into one class.

  36. development contents Widget part. Generate search field and dropdown

  37. development contents Search processing part. Get it by hitting the

    Connpass API.
  38. 4VNNBSZ

  39. Impressions I developed - The impression that I wrote the

    Dart language is similar to TypeScript. - It's difficult to make a Widget. It seems difficult to implement this according to the design specified by the customer. - Learning costs seem high. However, if you get used to it, you can write it neatly, so it looks good.