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

Flutter: Killing two birds with one stone

Flutter: Killing two birds with one stone

I gave a talk on how you can get started with flutter, in Road to DevFest event

Umar Saidu Auna

January 11, 2024

More Decks by Umar Saidu Auna

Other Decks in Technology


  1. Flutter: Umar Saidu Auna. Lead Organizer, GDG Minna Mobile Engineer

    @umarauna Killing two birds with one stone
  2. • Google Ul toolkit for building natively compiled apps for

    mobile, web and desktop. • Build iOS and Android apps using a single codebase. • Cross platform - Mac / Windows / Linux. • Extremley fast. What flutter is…
  3. • Flutter uses an O0P language called Dart. • Optimized

    for Ul. • Fast on all platforms. • Similar to JavaScript with elements of Java. The Dart Programming Language
  4. Widgets • Everything is a widget. • Uses Material design.

    • Scaffold, AppBar, Container, Image, Icon, etc. • Stateless & Stateful. • Build method.
  5. class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key:

    key); @override Widget build(BuildContext context) { return Container( //Here you can design the UI of this screen ); } } Stateless Widgets Immutable state that can NOT be changed during runtime
  6. class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key:

    key); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Container( //Here you can design the UI of this stateful screen ); } } Stateful Widgets Mutable state that can be redrawn on the screen multiple times
  7. Different Types of Widgets Output & Input (Visible) RaisedButton(), Text(),

    Card(),..... Drawn onto the screen: “What the user sees” Layout & Control (Invisible) Row(), Column(), ListView(),.... Give your app structure and control how visible widgets are drawn onto the screen (indirectly visible)
  8. If you are wondering how flutter/Dart “transformed” to a Native

    app.. Flutter SDK helps in doing that. Flutter SDK
  9. Flutter Does NOT Use Platform Primitives Flutter ElevatedButton() ElevatedButton() iOS

    Android UIButton Button Custom implementation (“Flutter directly controls every pixel which is drawn”) Greater control, less platform-limitations X
  10. Material Design Everywhere • Material is a Design System created

    (and heavily used) by Google. • It is NOT Google's Style, it is for Everyone! It is indeed highly customizable (and works on iOS devices, too). • Material Design is built into Flutter but you also find Apple-styled (Cupertino) widgets.
  11. Requirements • iOS: Latest Xcode & iOS simulator / iPhone.

    • Android: Android Studio / SDK / Emulator / Android Phone. • Android Studio Plugin. • VSCode Extension.