Using Material Design with Flutter

Поділитися
Вставка
  • Опубліковано 15 жов 2024

КОМЕНТАРІ • 148

  • @redbrogdon
    @redbrogdon 6 років тому +230

    Hmm. Seeing myself is making me wonder whether my shirt wasn't printed straight or my shoulders are somehow uneven.

    • @DanielTubul
      @DanielTubul 6 років тому

      Andrew Brogdon haha

    • @sarfarazsajjad
      @sarfarazsajjad 6 років тому

      its cool !!

    • @benton202
      @benton202 6 років тому +2

      While your here, quick question: is there plans to implement some sort of a drag and drop component for design flutter? similar to how it is with android studio when just creating android apps with java

    • @redbrogdon
      @redbrogdon 6 років тому +6

      benton202 If you mean a graphical tool that works as a drag-and-drop editor/preview of the UI, I don't think that's on our roadmap right now. The team has mostly been focused on making hot reload so fast and easy to use that your app itself functions as the preview: make a change, hot reload, fiddle a bit more, hot reload, just like you see me doing in the video.
      There are some tools in the works from other places, though. Infragistics recently announced a tool that will convert designs to Flutter code, for instance: www.infragistics.com/about-us/in-the-news/infragistics-announces-indigo-design-to-code-studio-a-digital-product-design-platform-bringing-designers-and-developers-together-to-build-amazing-user-experiences

    • @retzd
      @retzd 6 років тому

      Awesome :D

  • @davestr2046
    @davestr2046 6 років тому +47

    I hope no kittens were harmed in the making of this video

    • @redbrogdon
      @redbrogdon 6 років тому +18

      All kittens were scratched behind the ears and given a free meal at the Google café of their choice. :)

  • @satisfakshin
    @satisfakshin 6 років тому +7

    Great! Please make more vids with advanced app concepts. Loving it.

  • @suhaib_edu
    @suhaib_edu 2 роки тому

    اعتقد ان قوقل بحاجة لتحديث هذا الكود لانه لم يعد يعمل في التحديث الجديد ..
    لكن يجب ان أقول لقد كان الدرس مفيدا جدا بالنسبة لي و سهلا و الأهم من ذلك كان مختصرا يستحق 10/10 لو كان الكود محدثاً
    احببته
    ...
    I think Google needs to update this code because it no longer works in the new update..
    But I must say, the lesson was very useful for me, easy, and most importantly, it was brief, worthy 10/10. If the code was up-to-date,
    I love it.

  • @lucasmatheusdev2191
    @lucasmatheusdev2191 3 роки тому

    i love all team of Flutter .
    from Brazil

  • @kirill4531
    @kirill4531 6 років тому +4

    really fast and easy, great!
    One question: in the last step we changed the color of the button in some way that Flatt button has purple text on white background and raised button is vice versa.
    was it made automatically?

    • @redbrogdon
      @redbrogdon 6 років тому +3

      Yes. That difference is part of the behavior of the widgets, and should be automatic. RaisedButton (docs.flutter.io/flutter/material/RaisedButton-class.html) is intended to be a default choice, so it uses the bold primary button color as a way of saying, "Hey! Click me!" FlatButton (docs.flutter.io/flutter/material/FlatButton-class.html) is a choice that's present, but not as emphasized, so it uses a transparent background and styles its text using the primary color.

  • @javierchiquitoavellan1666
    @javierchiquitoavellan1666 4 роки тому +3

    i'm new to Flutter and i can see it's amazing. :D

  • @ahmad-tl7gw
    @ahmad-tl7gw 2 роки тому

    2022. And i watch this u are the best!!!

  • @luxeave
    @luxeave 5 років тому +1

    btw the theme property on MaterialApp changes need full reloading, the modification does not show on hot reload only. love working on flutter, 1 month into learning this now

  • @SF-ve3rc
    @SF-ve3rc 6 років тому +7

    *Thank you Kanye, very cool!*

  • @hungnguyenthanh1355
    @hungnguyenthanh1355 2 роки тому

    tuyêt vời .Hy vọng có thêm nhiều video hữa ích nữa

  • @CodingUnited
    @CodingUnited 4 роки тому

    Was the ListTile widget not invented by the time of this video because I feel like it would completely remove the need of the GestureDetector and styling the extra Container?

  • @SafdarAliShah_TimeTraveler
    @SafdarAliShah_TimeTraveler 6 років тому +3

    Amazing Video Please make more videos like this .........great way of explanation .....

  • @siegmeyer995
    @siegmeyer995 2 роки тому +1

    extremely good guide, thank you very much!

  •  6 років тому

    Best video ever for flutter. Thank you.

  • @sanjayaprasanna7462
    @sanjayaprasanna7462 5 років тому

    Hi. I am biginner to flutter. Can i know, which layout suitable for product listing page?

  • @preamjadhav14
    @preamjadhav14 4 роки тому +1

    Where did you put those images, before turning on python server. Please explain.

    • @ninjitsumaster1377
      @ninjitsumaster1377 4 роки тому

      I got lost with that python server part too. Network images are just images taken anywhere from the internet though.

  • @codawong
    @codawong 4 роки тому

    Flutter have a Sketch or Photoshop library? Thanks

  • @yunhangli9794
    @yunhangli9794 6 років тому +1

    woo... It's just fantastic and graceful.

  • @alexmercer3001
    @alexmercer3001 6 років тому +1

    Hi, I need to point out some things for you people in Google.
    When you develop a new platform, make sure you include all the documentation.
    If flutter is to ease developing, then why make it so complicated just to install it??
    Where is the emulator?.
    I have an AMD system, and I don't intend to use intel in the future just to develop android apps.
    I have been struggling to make emulator work.
    The basic flutter app crashes on visual studio emulator.(only way I can run AVD).

  • @nood7447
    @nood7447 6 років тому

    What plugin do you use for highlight brackets ??
    Flutter is awesome

    • @redbrogdon
      @redbrogdon 6 років тому

      I believe it's called "Rainbow Brackets." You can find it in the JetBrains plugin browser.

    • @nood7447
      @nood7447 6 років тому

      Andrew Brogdon , thanks, plugin name is really Rainbow brackets .

  • @chrislagos44
    @chrislagos44 3 роки тому

    can we use the Android Canvas in a drawable and set it as the background of a widget??

  • @koralite3953
    @koralite3953 6 років тому +3

    WOW just like that!!

  • @smithjohn5398
    @smithjohn5398 6 років тому

    Where I can get all properties for a widget with example code.? Flutter docs are not clear.

  • @chaosgoettin
    @chaosgoettin 3 роки тому

    me: *drops here from flutter because the material.dart package doesn't want to be imported and VSCode directed me here*
    also me: cool a flutter dev tutorial. And I am still clueless on solving my problem. Thanks Andrew.

  • @FreedomMelodyKH
    @FreedomMelodyKH 6 років тому

    Thanks flutter

  • @suyaparuiz316
    @suyaparuiz316 5 років тому

    This video deserves a like :)

  • @Dejan3979
    @Dejan3979 5 років тому

    I'm using Listview.builder with Expanded widget. But how do I make content generated with Listview.builder follow Wrap Axis.horizontal layout

  • @ashleelauren393
    @ashleelauren393 6 років тому +2

    thanks andrew

  • @SterileNeutrino
    @SterileNeutrino 4 місяці тому

    "short time coding" when eliding the "serious amounts of practice that goes before", but yes, this is pleasant. It probably needs a slight updated for the latest Dart/Flutter though.

  • @victorcastrocontreras6275
    @victorcastrocontreras6275 6 років тому +7

    Primer comentario en español!!!!!!!!!!!!!!!!!!!! :D

  • @mrdee734
    @mrdee734 5 років тому +5

    Looks insane amount of code to do simply things.

  • @olimac007
    @olimac007 2 роки тому

    Just awesome!

  • @hasan7312
    @hasan7312 5 років тому

    haha... most importantly, what you deliver is very straight!

  • @uziao
    @uziao 6 років тому +2

    Hello ^^ thank you so much :)
    I am a noob and i would love to know how to make it work getting data from a Node Api :}

    • @paulhmason
      @paulhmason 6 років тому

      Easy enough: flutter.io/cookbook/networking/fetch-data/

  • @softwareengineer5148
    @softwareengineer5148 6 років тому

    Can we compile it on browser like ionic 3? Or should we compile it on android emulator?

    • @alarbalarb
      @alarbalarb 6 років тому

      Ionic is browser viewer with some API
      In the other hand flutter react native and xamarin are native apps that can work in both with the same code.
      So no you can't because it's not HTML CSS

  • @skycloud0215
    @skycloud0215 6 років тому

    There seems to be issues.
    when placing:
    class Kitten {
    const Kitten({this.name, this.description, this.age, this.imageUrl});
    ...
    }
    Android Studio is yelling saying:
    const Kitten => Kitten is an invalid constructor name.
    The Kitten after all read:
    The name 'Magician' isn't a type so it can't be used as a type argument.
    Some Stack Overflow posts suggested to initiate the list inside constructor. I haven't gotten it working yet.
    Putting this comment here for anyone else who may be banning their head also.

    • @RobertWildling
      @RobertWildling 5 років тому

      Does your class Kitten extend StatelessWidget?

  • @sadabwasim9850
    @sadabwasim9850 6 років тому

    Woah. Awesome implemention!

  • @robertopro18
    @robertopro18 5 років тому

    Is there any reason of why Flutter introduces Bracket hell? or all methods starting with a return statement?

    • @justapugontheinternet
      @justapugontheinternet 5 років тому

      José Roberto Meza Cabrera it’s because you mostly use one method which is implemented in different ways (build method), and it returns a widget type. This is because flutter uses widgets for the most part (if not everything) thus wrapping every widget in a parent widget e.g Scaffold will return that parent with its children. The brackets can get many and messy but considering that you are basically building layers of widgets stacked on each other, they are necessary. I don’t know if this makes sense. But I’m sure you’ve already figured this out now but I thought I’d give it my best explanation/ opinion anyway.

  • @sarfarazsajjad
    @sarfarazsajjad 6 років тому +17

    that is a lot of view model and controller code in same place...

    • @SafdarAliShah_TimeTraveler
      @SafdarAliShah_TimeTraveler 6 років тому

      what do you mean?

    • @sarfarazsajjad
      @sarfarazsajjad 6 років тому +2

      meaning separation of concerns

    • @SafdarAliShah_TimeTraveler
      @SafdarAliShah_TimeTraveler 6 років тому

      i get it ..thanks for fast reply .....

    • @redbrogdon
      @redbrogdon 6 років тому +26

      True, but that's mainly because I'm totally focused on the UI in this video and keeping everything else hardcoded and in one file. I recommend checking out Brian Egan's architectural samples to get an idea of how separation of concern can work in larger apps: github.com/brianegan/flutter_architecture_samples

    • @barnabasbartha3507
      @barnabasbartha3507 5 років тому

      And inline styling...

  • @davincifpv3983
    @davincifpv3983 6 років тому

    How do we get those colored brackets in Android Studio? Handy!

    • @akhilez
      @akhilez 5 років тому

      Rainbow brackets plugin

  • @iamtafara
    @iamtafara 5 років тому

    Ok this is crazy.... full all in 13 mins on both ios and android? Gerara here

  • @jailson772
    @jailson772 6 років тому

    Great Video Thanks.

  • @JunioJsv
    @JunioJsv 6 років тому +6

    Tenho que aprender essa linguagem e largar o java!!!

  • @itsflutterday8549
    @itsflutterday8549 5 років тому

    Please explain Alignment and Other Layout Widgets

  • @SajadVafa
    @SajadVafa 2 роки тому

    Don’t forget google updates the code requirement every day. So, get ready to continuously update the whole code…

  • @MatthewKrekeAuthor
    @MatthewKrekeAuthor 4 роки тому

    I built an app that works when loaded from android studio. But when I try to open it on my android phone without attaching it to my computer, it just loads forever. Any advice? It was built in flutter.

    • @karanvb8243
      @karanvb8243 4 роки тому

      Did you use profile version of your app. It wont work if you try load debug version of your app without loading from android studio.

  • @adithyadinesh1996
    @adithyadinesh1996 6 років тому

    Does ios simulation works for windows or Linux that would be deal breaking....

    • @chinmayrelkar8486
      @chinmayrelkar8486 6 років тому

      Adithya d Same question here.

    • @paulhmason
      @paulhmason 6 років тому +2

      The iOS simulator only works on MacOS, but that's a simulator restriction, not a Flutter one. You have that problem no matter how you develop an iOS application. The upside is that you can take your code that you built your Android app from and copy it to a Mac and simply build an iOS version with no changes.

  • @dhruvipaprunia3279
    @dhruvipaprunia3279 4 роки тому

    I am sorry, I am a beginner to coding so from this explanation I couldn't understand anything so can someone please recommend some videos for me to watch so that I can learn coding.

  • @MrDania101
    @MrDania101 5 років тому

    thank you so much

  • @egm5081
    @egm5081 6 років тому +2

    thx man

  • @ehsanhasin8092
    @ehsanhasin8092 Рік тому

    that's awesome

  • @JONFK
    @JONFK 6 років тому

    What is the editor that you use in this video??

    • @redbrogdon
      @redbrogdon 6 років тому +1

      I use IntelliJ IDEA CE. Flutter also has plugins for Android Studio and VSCode, though.

  • @DanielTubul
    @DanielTubul 6 років тому

    Very impressive

  • @kneckel
    @kneckel 6 років тому

    Have y'all created a videoPicker yet?

  • @mohammadakbari5506
    @mohammadakbari5506 5 років тому

    hi, please help me for chice flutter or swift native im an iosdeveloper for 8 month bu t see flutter , i dont . now got to flutter or stay swift .... thanks for you important for me

  • @mrf28
    @mrf28 6 років тому

    Welp... dart again, it gets more and more frustrating supporting Angular. I really just want to know if I can expect something on angular + flutter or even if angular is considered to be mobile at all.

    • @matej0909
      @matej0909 6 років тому

      what do you mean?

    • @mrf28
      @mrf28 6 років тому

      I mean Angular is not adopted by google as main technology for new projects.

    • @hanijazzar3560
      @hanijazzar3560 6 років тому

      Check out Nativescript

    • @paulhmason
      @paulhmason 6 років тому

      There's Angular Dart (the Dart version of Angular). Apart from that Flutter is used for native app development, not web development (it's Dart that can target the JavaScript or ARM code). There's nothing stopping you using Angular with Cordova or Ionic for hybrid app development.

  • @olufemioyedepo2791
    @olufemioyedepo2791 5 років тому +5

    I need an iOS simulator that runs on windows 🙁

    • @beastern1807
      @beastern1807 4 роки тому

      not possible or maybe a mac os virtual machine

    • @crossfade7112
      @crossfade7112 4 роки тому

      @@beastern1807 is there such a thing?

  • @heshansandeepa9471
    @heshansandeepa9471 2 роки тому

    Great

  • @TheLunaticCultist
    @TheLunaticCultist 6 років тому

    Look awesome

  • @徐徐-h1s
    @徐徐-h1s 5 років тому

    can you give me the code address.I want make a note every lesson.

  • @Block_AI
    @Block_AI 6 років тому

    Nice

  • @clearwavepro100
    @clearwavepro100 6 років тому

    thank you for sharing this~!

  • @mr_jozeee
    @mr_jozeee 6 років тому

    lovely

  • @RaymondAtivie
    @RaymondAtivie 6 років тому

    What IDE is bring used?

    • @redbrogdon
      @redbrogdon 6 років тому

      I use IntelliJ IDEA CE. Flutter also has plugins for Android Studio and VSCode, though.

  • @secretwpn
    @secretwpn 6 років тому

    I'd really like to use flutter, but until it supports Google maps, it is unfortunately no use for me

    • @paulhmason
      @paulhmason 6 років тому

      There's an unofficial Flutter package for Google Maps (I'm sure an official one is on the cards before the V1 release - it makes sense to have one). pub.dartlang.org/packages/map_view

  • @MrLebatteurdu33
    @MrLebatteurdu33 6 років тому

    Which plugin are you using for coulouring your parenthesis different colors ?

    • @redbrogdon
      @redbrogdon 6 років тому

      I believe it's called "Rainbow Brackets." You can find it in the JetBrains plugin browser.

  • @GameCrawl
    @GameCrawl 5 років тому

    Could you post the code to github?

  • @berkalkan3382
    @berkalkan3382 3 роки тому +1

    me wants to be in this app!

  • @asvinselvarajan1057
    @asvinselvarajan1057 4 роки тому

    Http Package is not working plz help me ..

  • @សុងចាន់ថន-ព7ឡ
    @សុងចាន់ថន-ព7ឡ 5 років тому

    wow !

  • @pianoshaman2807
    @pianoshaman2807 6 років тому

    Is this better than ionic 3?

  • @petmik5022
    @petmik5022 6 років тому

    damn Im 20 yes Java developer and switch to flutter to learn is for me headache im so lazy :-d

  • @RaydennOfficiel
    @RaydennOfficiel 6 років тому

    Unfortunately the dart bridge to native code is too big compared to the JavaScript one used by react native. I was super excited by flutter but it has nothing more than react native.

    • @MontyRasmussen
      @MontyRasmussen 6 років тому +4

      What are you talking about? With Flutter, the Dart code is compiled to native code. There is no bridge comparable to the JS-to-native bridge.

    • @aaakin
      @aaakin 6 років тому +1

      Code is compiled to machine code.

  • @captainnemo2514
    @captainnemo2514 4 роки тому

    It's fine! Can you to tell on Russian language?

  • @jonneymendoza
    @jonneymendoza 6 років тому

    native all the way!

  • @AvinashSingh-nq5ud
    @AvinashSingh-nq5ud 6 років тому

    wow

  • @SahaniSR
    @SahaniSR 6 років тому

    Help me

  • @pedromassango
    @pedromassango 6 років тому

    Implement XML in Flutter please, I'm waiting for it...
    It is mutch easy to build UI with xml (for me)

    • @AlvarLagerlof
      @AlvarLagerlof 6 років тому

      But then you need ids and getItemByID

    • @pedromassango
      @pedromassango 6 років тому

      Alvar Lagerlöf No, with Kotlin we do not need find view by I'd anymore

    • @pedromassango
      @pedromassango 6 років тому

      Alvar Lagerlöf if they use the same approach maybe Flutter get better

  • @mmahgoub
    @mmahgoub 6 років тому +1

    Why Dart though 😞 I was hoping for something like nativescript from Google

    • @redbrogdon
      @redbrogdon 6 років тому +1

      This comes up a lot. The team wrote an article explaining what Flutter needs from its language, and why Dart was chosen: hackernoon.com/why-flutter-uses-dart-dd635a054ebf

    • @MontyRasmussen
      @MontyRasmussen 6 років тому

      hackernoon.com/why-flutter-uses-dart-dd635a054ebf

    • @mmahgoub
      @mmahgoub 6 років тому +1

      Monty Rasmussen I honestly don't like the descriptive approach I prefer an MVC approach it is more organized and concise, Dart code with its seemngly never ending code blocks is confusing and ugly

    • @MontyRasmussen
      @MontyRasmussen 6 років тому

      That's a separate issue from what language the Flutter framework uses, though. But in response to that extremely common concern, all I can say is that pretty much everyone who gives it a real try either finds it isn't so bad or even comes to prefer it. I don't personally have a strong opinion on the subject of imperative UI, as I'm more of an AngularDart developer (web apps).

    • @matej0909
      @matej0909 6 років тому +1

      Its weird first, but once you get used to it, getting back to old techs feels like stone age

  • @mulletman1705
    @mulletman1705 2 роки тому

    Those are cats not kittens, fix your code.

  • @peterinvestor
    @peterinvestor 2 роки тому

    I cant help myself but this code is so ugly, good luck to person who will maintain this code. No separation of model, view & logic. Flutter seems very easy for small project like shown in this video but once there is 20 pages, 50 entities good luck or am I missing something. I would like to see separation for model (Kitty), template for (dialog) with centralized css file, and logic but in this video, it is merged everything into 1 file that makes is unmaintainable for big projects.

  • @slothsarecool
    @slothsarecool 5 років тому

    Material is so dated already

    • @chengyanslc
      @chengyanslc 4 роки тому

      What is the cutting-edge one then?

  • @maxbrazil3712
    @maxbrazil3712 5 років тому

    Material design, giving programmers an excuse to be boring and lazy.

  • @amigomadiq2899
    @amigomadiq2899 6 років тому

    So now you have absolutely abandoned java!

    • @redbrogdon
      @redbrogdon 6 років тому

      Amigo MadiQ Google has *plenty* of Java engineers, don't worry. :)

    • @michelchaghoury870
      @michelchaghoury870 3 роки тому

      @@redbrogdon does google uses java and spring boot to build there backends? Or they use it only for Android?

  • @EVERYDAYTeclog
    @EVERYDAYTeclog 6 років тому

    1st please heart

    • @SahaniSR
      @SahaniSR 6 років тому +1

      EVERYDAY Teclog

  • @DouglasMichaelkings
    @DouglasMichaelkings 6 років тому

    Stop talking about this none important stuff. When is Google going to introduce something better than Photoshop and Corel draw?