Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Takayuki

May 25, 2020
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. ◆ 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
  2. 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
  3. Copyright Re:Build.inc All Rights Reserved. 7 ·Service name Tadoru https://tadoru.work/

    ɾ System overview Engineer-specific Referral Crowd sourcing 1 Company introduction
  4. 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
  5. 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
  6. 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/
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. The iOS app is also not very easy to use.

    Why I decided to Developed
  21. Connpass API Document There are several search conditions, so we

    are still in development. https://connpass.com/about/api/
  22. 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.