Flutter’s Cupertino Package for iOS devs - Flutter In Focus

[@andrewbrogdon558]

One of the nice things about these videos is that while you're learning from us, we have the chance to see what you're interested in and where we should invest our time. Judging by the comments so far, it looks like folks could use more information about how Cupertino and Material relate to Flutter's mission as a multi-platform SDK and how to put them to work in the same app. That sounds like a good topic for a Boring Show episode, so we'll try to work it into the rotation in the coming weeks. Thanks for letting us know!

[@ShabiboSheikh]

Yes! , I want to see you guys implement Material and Cupertino in the same app and handle the different platforms. It's the missing link for me when I experiment with Flutter projects.

[@Omniwoof]

That boring show topic sounds like a great idea Andrew. Just to clarify my other comment, I was referring to the need to write two versions of the UI, not two versions of the business logic. However, after chewing on it a bit the way the form elements look probably isn't going bother Apple users as much as the page change UX will. What I mean a material switch fundamentally will work the same way as a Cupertino switch but the CupertinoPageRoute adds a new gesture that I suspect iOS users will find annoying if it isn't there. So I'm thinking (for my MVP) Cupertino form elements are a 'nice to have' but the page transitions are feeling more like a 'must have'. (At least for my app that relies heavily on a slick UX.) I'll probably add a full Cupertino experience after our beta though. Thanks for making the video's mate and thanks for engaging with the comments. :)

[@satisfakshin]

Yes exactly that! Thanks for always listening guys!

[@Nullscr1pt]

I am new to flutter but I have built full apps in Angular 7, Nativescript, etc.. I am trying to make a switch to flutter, so for me, some of the things that interest me are things like how I would nest a router in the contents of a side drawer. How to make a simple app that pulls data from JSON, displays a few pages, has a sidebar that handles navigation, and how to highlight the sidebar based on what navigation route you are currently on (like a .active class on the sidebar element that is the current route). Some of these tutorials are already on google but videos are always super helpful. I think with the basics I mentioned, you could build some really powerful apps with flutter.

[@TheCodebookInc]

Can we have Google maps marker placement on tap and directions

[@eliseerickson5994]

I love this video! All the descriptions are clear and Andrew's voice makes me feel like I'm being taught by a friend that's really invested in my success. Go Andrew!

[@Omniwoof]

This is probably a silly question but I don't really see a way of writing a Flutter app using Cupertino and Android feels without having to write two versions of the code. Is that correct?

[@DevilMadeMeDoIt666]

David Fawcett was just thinking the same thing.

[@RichardVowles]

Two versions of the UI, absolutely. But as flutter makes it easy to keep the app layer separate, it isn't as big a job as it would otherwise seem. Google generally doesn't do it though, most Google apps on iOS are material, so unless there is a really good reason, I tend to always go material first.

[@testaccount6365]

Yes, I actually want to know this. How can I produce two different views of ios and android without writing two different codes? Am I missing something?

[@chuguanyu]

Flutter Platform widgets might help. pub.dartlang.org/packages/flutter_platform_widgets

[@CrisRusia]

I was thinking the same. Write two times the code seems like brocking the idea of Flutter... Is not enough to use only the Materia.dartl and Scaffold to make adapt our application for the two systems?

[@TheBillionDollarSaaS]

Please provide more videos of this kind, where content is provided more detailed but at the same time compressed. Something between the boring show and widget of the week. I like it.

[@JFkingW]

Kinda disappointed that you didn't adress the biggest problem: how can I have meterial and cupertino based in the the platform without having to write everything twice?

[@Pablo_IF]

You have to use BLoC pattern (or something similar), and separate your UI code and your Logic code. Then, at the beginning of your app, you can do something like this: if(Platform.isIOS){ runApp(CupertinoApp( ... ... )); } else if (Platform.isAndroid){ runApp(MaterialApp( ... ... )); }

[@ShivamJha00]

@@Pablo_IF that would be such a big mess.. react native is much better if that's how it works because it calls the native components automatically for us without duplicating every thing

[@robertpiosik93]

@@ShivamJha00 Not really. Natural iOS UI behaviours are quite different from these you can find on Android. API calls, data manipulations etc. are all written once, simply how you show content on the screen differs and you really want to have control over it.

[@andreypanin2136]

Come for Flutter, stay for the t-shirt.

[@michelfeinstein]

Please make a video on the latest releases of flutter 1.2 and Dart 2.2

[@mohammadrasoulfard-habibi3066]

Yes definitely want that.

[@rachevp]

At the beginning of the video, there was a quick flash of a Cupertino sample app showing a lots of items, as well as an iOS-style search bar at the top. I was wondering, if a search bar widget is coming to the Cupertino set, because the open-source alternatives aren't really feature complete. Building such a navigation bar with a built-in search box could make a great tutorial, especially, if you target topics such as slivers as well. Cheers!

[@flutterdev]

You can find that app in our samples repo: github.com/flutter/samples. There is an open feature request for a UISearchBar equivalent in the flutter/flutter repo as well, though I don't know when it's going to make it onto the roadmap.

[@sinaebr7337]

pls create a video about page transitation animation and how can change theme . tnx :)

[@MehdiHaghgoo]

Can write and use Cubertino style for Android too? Or would that need separate code for Android? Personally, I don't mind to see iOS-like app experience on Android.

[@rick_from_yr]

It would be great if there is an article that shows the equivalent widget from Material to Cupertino. To easily change the code when creating the builds/bundles for AppStore/PlayStore. Thanks for the video :D greetings from Peru

[@dineshnagarajandev]

Nice T-shirt 👌

[@mosth8ed]

Appreciate the video and explanations, but if I hear the word "Cupertino" one more time, I am going to explode.

[@chvrleshd]

LMFAO

[@wortis683]

Cupertino

[@remoreacts91]

Can the Flutter team please do a simpler to understand video about how to use the Bloc pattern?

[@homeofcreation]

In European countries keyboardType: TextInputType.numberWithOptions( decimal: true,), gives a comma as the decimal separator on a physical iPhone. But is doesn't work right because the amount with decimals isn't parsed inside the TextField. Is there a workaround for this?

[@WEIRDED_BEARDO]

What's the editor theme? I love the colored brackets. Looks really helpful

[@benjaminbozic8387]

Was wondering the same thing and then found this plugin: plugins.jetbrains.com/plugin/10080-rainbow-brackets

[@Valerianagit]

This is exactly what I was gonna ask :)

[@BurtonJohnson]

I don't understand. I thought the whole point of Flutter was being cross-platform. Do I have to choose between MaterialApp and CupertinoApp?

[@hamzaimran1991]

One codebase two platforms. If you are making an app just for iPhone you should go for the cupertino theme.

[@amari343]

Not exactly. You could make a widget that, based on the platform of the phone (e.g. Apple or Android) it changes between Cupertino and Material. The fact that Flutter is cross-platform just means that the apps look the same on both platforms, nothing else.

[@Gabeaventh]

MaterialApp and CupertinoApp is a way you choose to render the app, it doesnt matter if you code using MaterialApp for iPhone app using flutter, dart will take care of it and you can use both at the same time, like using CupertinoTabBar while the rest off the page using MaterialApp components i hope this answer your question :)

[@yadunandanks8781]

You can, but nobody wants androidish looking app on iOS!!

[@Hell2Night]

Burton Johnson Nop, you can use either one or the other for both platforms. You can stay with Material and build and app for iOS and Android. Even if it’s cross platform you may want to provide a design that’s feel « native » and to do that you have no choice but follow design pattern of each platform. Which is not the case of many apps, but still, with Flutter you can.

[@firedevelop]

Thanks Andrew, amazing job!

[@matthewjerdidahhansen7331]

I have a question which isn't directly related to the topic of this video, but let me ask anyways. How do I keep my CustomAppBar with a ScrollView under it so that when I scroll, by appbar stays in view and everything else under it scrolls???

[@themindstorm9947]

Do the widgets provide the haptic feedback on iPhones?

[@kenn850]

Hey,quick question why is the no slide up panel in flutter ,is there a request for such a widget. (And yea i googled it,answers at stack overflow were not exactly definitive)

[@vinodvishwanath2360]

Nice video , Is there a way in flutter to achieve spinner UI for android version and UIAlertController UI for iOS version in a same app

[@SapiensHomo-k7r]

I've been developing an app for both android and ios. I've found out some material widgets won't work under cupertinoApp root while most cupertino widgets will do fine under materialApp. So i decided to go for a single material tree. Wherever i needed a different style on ios (For switches, buttons, etc) i'd just use platformWidget (pub.dartlang.org/packages/flutter_platform_widgets) or check myself the target platform which is quiet easy to do. So i'll say no, you won't write 90+% of your app twice unless the whole layout is platform-dependant

[@marcowang7596]

what syntax highlighting is he using??? I need it

[@sergiopineda3107]

Very good, I got It, thank you so much

[@SEGVeenstra]

Can I have the same kind of tab navigation of Cupertino on my Material app? I sometimes prefer the separated navigation stacks.

[@luaconsoni]

Visually, this reminds me of the Node callback hell. But we need a new name for it. I vote for Nested Elements Hell. JK, I like Flutter.

[@VPSantiago]

Does the CupertinoApp scaffolding handle auto-layout correctly on iOS?

[@avsajay8609]

Can we use bother material and Cupertino in one app

[@henrytan5707]

don't you have auto-conversion between android and ios versions of the UI? it's not smart to do it separately.

[@ArshdeepSingh-ob7rj]

How are you updating the UI without setState .

[@g-tensolution8527]

I need to buy mac to test that os emulator huh?

[@robertpiosik93]

No. Every component runs through flutter (engine in this case, not framework, github.com/flutter/engine) which controls every pixel on the screen. Premade iOS widgets works everywhere, in the android emulator / android real device / chrome browser and so on. It's completely up to you where you use any given yours, built-in or community made widget.

[@bazrafkanmb]

Please create video about EventChannel that use for send event from host to client, thanks

[@rationalityfirst]

Flutter is cool and all, but it can become quite fast indentation hell. Any hints on how to avoid that?

[@rubynaxela8524]

Why do you think the tabulation size here is 2 spaces here and not 4, like usually? :D You can always extract some of the most indented code into your custom widgets, but I think Flutter was pretty much designed for its code to be written like that, which is a little similar to HTML, for instance One more thing you can do is to avoid breaking short statements like Expanded(child: Text('text')) into several lines (which happens when putting a comma after the Text widget)

[@godspowerokoro]

Can i use cupertino app for an android app

[@0x4ym4n]

Great tutorial, keep it up.

[@AldoCastorena]

What plug-in do you use for code reformat and refactor? (Like when you transformed the stateless widget to statefull). Great video :)

[@redbrogdon]

The Flutter plugin can actually do that on its own. On a Mac running IntelliJ, it's Option-Enter, but the other IDEs/platforms have shortcuts, too.

[@matiasgomez9416]

I have problems with the "onPressed: (){}" : The named parameter 'onPressed' isn't defined. How can I fix it??

[@indignocat]

I found the cause: Between child: Center( and child: Text( I missed a child: CupertinoButton (which defines onPressed) So it’s: child: Center( child: CupertinoButton( child: Text( ‘This is tab #$i’

[@Abay_Zhunis]

Did you solve it, man?

[@Abay_Zhunis]

@@indignocat man, it didn't help at all, but thanks for the advice :(

[@romanvernik1968]

4 years passed. Still no iOS-like shading while swiping back to previous screen.

[@abhishtsingh6073]

This is amazing!

[@mustafadarwesh9108]

Can someone tell me how I can get the dark keyboard for IOS. Changing keyboardappearance does not work :(

[@marufhasan9365]

keep them coming.

[@joelalvarezhernandez4228]

hI, i have a problem , when I write CupertinoApp it says : The method 'CupertinoApp' isn't defined for the class 'MyApp'. I dont know why, I imported the cupertino library, import 'package:flutter/cupertino.dart';.

[@andrewbrogdon558]

Well that's weird. We'd probably need to see the actual code to know what the issue is, and KZbin's comment section isn't all that great for sharing code. I'd try creating a post on StackOverflow. A lot of good Flutter devs hang out answering questions there, and you should be able to get things sorted out.

[@joelalvarezhernandez4228]

@@andrewbrogdon558 at the end I solved it, my flutter was 500 days without updates😂, after the update it worked, thank you anyway

[@andrewbrogdon558]

@@joelalvarezhernandez4228 Yeah, I'm pretty sure the SDK team has done some coding in between then and now! Glad you got it working. :)

[@SethuSenthil]

Can I use this package on Android?

[@Provaplaylist]

I have followed the tutorial and I getting an error when I push button to go in the DetailScreen flutter: The following assertion was thrown during a scheduler callback: flutter: There are multiple heroes that share the same tag within a subtree. flutter: Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must flutter: have a unique non-null tag. flutter: In this case, multiple heroes had the following tag: Default Hero tag for Cupertino navigation bars flutter: with navigator NavigatorState#12aa8(tickers: tracking 2 tickers) flutter: Here is the subtree for one of the offending heroes: flutter: # Hero(tag: Default Hero tag for Cupertino navigation bars with navigator flutter: NavigatorState#12aa8(tickers: tracking 2 tickers), state: _HeroState#a54ec) How can I fix???

[@darrendai6412]

navigationBar: CupertinoNavigationBar( middle: (i == 0) ? Text('Articles') : Text('Views'), transitionBetweenRoutes: false, // add this line ), but I don't know why

[@heshansandeepa9471]

Very nice

[@flutterdev]

Thank you, Heshan! We appreciate your unwavering support 🙌

[@sarahaimen5602]

Hi, Can you tell which ide it was.

[@ShivamJha00]

Android studio or intellij

[@barbieroalex]

Nice thank you!

[@-leovinci]

The codes without so many underlines are much more artistic...

[@thundergabriel]

8:48 This is the why React Native create Hooks . Wrapper Hell ❗❗❗❗☢

[@zzzyyyxxx]

Flutter also has hooks, as a package: pub.dev/packages/flutter_hooks. Check out some of the other packages by the author, some are particularly cool, such as the freezed one, which gives you algebraic data types like in Typescript, Kotlin, Haskell, and so on: pub.dev/packages/freezed

[@Dorumin]

This video would've been better if it showed how to actually use the return value from Navigator.pop :P

[@naderkhaled9410]

Where is the next video about Ml Kit with flutter

[@flutterdev]

It's in post-production now. Should be out within the next week, I think.

[@mohamedsamy2315]

can send to ios and Andriod users link to download my app if I change in it at any time.. (How to upload my app to ios users)

[@kamalabdullayev8505]

Hi! Anyone here knows how to reduce video size (compress video) by using flutter?

[@christopherjonson7670]

And don't forget to use SafeArea inside CupertinoPageScaffold's child, like that: @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar(), child: SafeArea( child: And your content is here ) ); }

[@Shanboss277]

Thank you kind sir.

[@sodiboo]

"cupertino package" but... it's part of the flutter package... import "package:flutter/cupertino.dart";

[@fredv9999]

Nice tutorial ! . I tried as well to develop Cupertino Theme app. I get the following issues: SearchBar not available, Activity indicator not available with Cupertino theme, Tap on buttons is not the same as native ios App (button is grayed when tap on iOS), no access to native MapView. But for other components it is really nice !!

[@alexisdvt]

An iOS developer dislike this video...

[@AbdullahGameDev]

Why?

[@ryadhiprasetya]

Can i use this for android? So i can bring beauiful ios ui for android user. Hahaha

[@Pablo_IF]

Yes, you can

[@danielduvana]

Are you planning on making more widgets like Switch.adaptive? It would be amazing to have more widgets have "adaptive" constructors :)

[@leventkantaroglu7892]

Thanks

[@johnny.s7036]

sooooo cool

[@hoekbrwr]

And the war between Apple and Google keeps you busy. special boilplate for each platform. I think the whole idea of using Cupertino widgets is not what you advertize 1 code for all! and then we have web, and other platforms. The function of the widgets stays the same, but they look different on another platform. WHY NOT DO ALL DIFFERENCE IN THE BACKGROUND WITH 1 SWITCH IoS/wEB/aNDROID???

[@ydahm]

Loving flutter!!

[@BRC762]

Up!

[@asdf-e3d]

Live Slow Die Whenever!!!

[@dimarostopira1438]

Fatal error: UnexpectedCuteGirlException at the end of a video

[@gosnooky]

Meh, I'll use Material all the way. Material looks better than Cupertino. Plus, I want my iOS users to feel a bit uncomfortable.