Reflectly-Inspired Animated Slideshow with Flutter + Firebase

Поделиться
HTML-код
  • Опубликовано: 22 окт 2024

Комментарии • 98

  • @corynorell3686
    @corynorell3686 5 лет назад +2

    I doubt I had anything to do with this video - but I asked you to do a piece on Reflectly - and here it is. Whether it was me or someone else, it's really cool to see you responding to the community's requests. Much respect!

  • @jeromestsauver
    @jeromestsauver 5 лет назад +1

    I like how your demos show solutions that can be applied to almost any app. Great job.

  • @FilledStacks
    @FilledStacks 5 лет назад

    This channel is one of the reasons I started knowledge. We need more high quality tutorials like like this.

  • @vidy9754
    @vidy9754 4 года назад +2

    A splendid video absolutely loved it and learned a lot. The only problem is that some of the syntax with fire base has changed since and if we follow it as is it is feeling. Keep that in mind whoever else is going to follow this tutorial.

  • @hossainurrahaman
    @hossainurrahaman 5 лет назад

    At a speed of 0.75, one of the most important topic for any app which uses firebase as backend. Thank You

  • @marianouvalle895
    @marianouvalle895 5 лет назад +4

    Amazing video Jeff! Keep them coming.

  • @AvinashSingh-nq5ud
    @AvinashSingh-nq5ud 5 лет назад +2

    Love ur Videos. I am eagerly waiting for your flutter course.

  • @nicolapigozzo5188
    @nicolapigozzo5188 5 лет назад +22

    More videos with flutter please

    • @Fireship
      @Fireship  5 лет назад +8

      More on the way, along with a full course, and a fireship quiz app built with Flutter :)

    • @nicolapigozzo5188
      @nicolapigozzo5188 5 лет назад +1

      Flutter + firebase = future

    • @santerek28
      @santerek28 5 лет назад +3

      @@Fireship impatiently waiting for the course

    • @allochi
      @allochi 5 лет назад +1

      @@Fireship Hey, could you please share the outline of your course and when it will start? Thanks a lot! I really enjoy your videos.

  • @mohammadrasoulfard-habibi3066
    @mohammadrasoulfard-habibi3066 5 лет назад +11

    Love this channel thanks buddy.

    • @Fireship
      @Fireship  5 лет назад +1

      Thanks for watching :)

  • @LukePighetti
    @LukePighetti 5 лет назад +2

    In the past I have done this type of animation by tying into the _controller position directly. No animation needed, it's all handled by the position. Ends up looking very compelling. Also, get your filthy JavaScript semantics out of my Dart. ;) Loved the video!

    • @vinceramces
      @vinceramces 5 лет назад

      Wasn't "the function as widgets" are antipattern? Are you using it as convention or performance?

    • @Fireship
      @Fireship  5 лет назад +1

      Haha, don't you come from humble JS roots? Are you referring to the prolific use of ternary operators or something else? That seems like a good way to go with position, although I like the idea of being able to animate additional things on the container as needed.

    • @LukePighetti
      @LukePighetti 5 лет назад

      @@vinceramces function as widgets isn't the end of the world, after all, that's what a WidgetBuilder typedef is.

    • @LukePighetti
      @LukePighetti 5 лет назад

      @@Fireship haha yes I do, very humble es2016 roots. Ah just things like no return types for functions, no @override annotations, `ctlr` instead of `_controller`, assigning values to class properties instead of using Dart getters. Little things that don't make a difference unless you're a Dart programmer trying to read someone's Dart code. You know, the stuff that only pedantic Dart people would care about! :D

    • @LukePighetti
      @LukePighetti 5 лет назад

      By the way, I would love to see your opinion on AngularDart.

  • @mitchdeli4212
    @mitchdeli4212 5 лет назад +1

    Hi Jeff,
    great tut, I really like it. I wish to develop app further and dynamically create Tags (not hard code them) on TagPage. How to do that?

  • @AvantGrade
    @AvantGrade 5 лет назад

    wow!
    your work overall is top notch!

  • @Thankgoodness77
    @Thankgoodness77 Год назад

    Very helpful, thank you❤

  • @deepjyotibaishya7576
    @deepjyotibaishya7576 5 лет назад +1

    i am waiting your awesome Flutter Course . Please Add an complete Project On your Course

  • @natmazhara6221
    @natmazhara6221 5 лет назад

    I love your videos. Thank you a lot!!!

  • @noorsyyed
    @noorsyyed 5 лет назад

    wow, you just gave wings to my idea , thanks

  • @huzefatunkiwala5414
    @huzefatunkiwala5414 5 лет назад

    thank you jeff you are Amazing teacher

  • @anirbaanghatak2640
    @anirbaanghatak2640 4 года назад

    Thanks this video was very Helpful for my app. Just a doubt when the button is selected how can I change/transition it onto the slide without swiping.

  • @oalef3411
    @oalef3411 5 лет назад

    It's an amazing video. Love it.
    BTW, the code appearing, do you make while editing the video or it's some tool or extension?
    It's delightful on a presentation.

    • @Sj-rj5pp
      @Sj-rj5pp 4 года назад +1

      May b Ctrl+z 😅

  • @mithunnathmayooranadhan194
    @mithunnathmayooranadhan194 5 лет назад

    Thanks for the amazing tutorial. One thing which I couldn't figure out was, how to give onPressed or Tap to the AnimatedContainer. I know we could use Inkwell widget here, but is that the ideal way to do it? Thanks

  • @divinedela9125
    @divinedela9125 5 лет назад

    Yasssss!!!Upcoming flutter course!!!

  • @EdititStudio
    @EdititStudio 4 года назад

    Man, You are amazing.

  • @7lnbo7a
    @7lnbo7a 5 лет назад

    Nice,, Just one question,, with this structure the slides will re-build every-time u swipe,, because of setState... now if you have loader like I have in my app, with every slide the page photos will reload...what do u think about that,, is there anyway . I can make the pages not rebuild,, BTW I tried to remove the setState and disabled the active animation,, but yet the page view control rebuilds all the off-screen views ,,, just to save memory or something... any suggestions?

  • @dainjazone7913
    @dainjazone7913 5 лет назад +1

    can the pictures be programmed to have an on pressed function?

  • @lordswaggity1213
    @lordswaggity1213 5 лет назад +1

    When is the course coming out? It's been a couple of weeks 🙂

  • @nevit94
    @nevit94 4 года назад

    excellent video, one question, how do I upload to an image with the array, thanks

  • @rajdave9862
    @rajdave9862 5 лет назад

    Omnamahshivay
    Please tell from where u are learning this all amazing things in flutter

  • @complex5372
    @complex5372 5 лет назад

    Upvote for your great work as always!! Though I’m not sure where Google is going with these very complex systems. We could have done the same thing with angularfire and ionic1 by putting an ngRepeat on a slider directive linked to an AF datastore. That would have been like 5 lines of code.
    Edit: oh it’s a plug-in. Alrighty.

  • @juangamarra1463
    @juangamarra1463 5 лет назад

    Amazing. Thank you.

  • @tapizquent
    @tapizquent 4 года назад

    Hey! Is there any way to do this animation a bit more smooth? Instead of changing size of animated controller when it’s “active”, can it change more dynamically as you scroll? I.e more like what Reflectly does, the one on the left decreases size and the one on the right increases. By the same logic, when they’re in the middle both are the same size

  • @MarcoSync
    @MarcoSync 5 лет назад

    This SlideShow is pretty amazing! What I can use to doing something like this in Ionic 4 + Firestore? Thank's in advance. 🤓

    • @alexandrsmith6909
      @alexandrsmith6909 5 лет назад +1

      Marcos Ribeiro dude I strongly suggest u to switch from ionic to flutter 😉ionic sux trust me

  • @snow_tellem
    @snow_tellem 5 лет назад

    thanks..u really saved me

  • @animatrix1851
    @animatrix1851 5 лет назад

    Is it possible to make the current page overlap onto the next, almost as if the next was visibly below the current page

  • @danilyusupov5364
    @danilyusupov5364 4 года назад

    Nice, thanks!

  • @MikeAT
    @MikeAT 5 лет назад

    More flutter please! :)

  • @bearzal2234
    @bearzal2234 3 года назад

    I got the following error:
    The following NoSuchMethodError was thrown building StreamBuilder(dirty, state: _StreamBuilderBaseState#b404f):
    The method 'toList' was called on null.
    Receiver: null
    Tried calling: toList()

  • @3mro_coding
    @3mro_coding 5 лет назад

    My wish only to get access to credit card so I can be a pro member 😓.
    Any way am enjoying the free youtube content. Thanks for sharing this awesome stuff. Make more flutter tutorials plz.

  • @orlandogasparreyes2108
    @orlandogasparreyes2108 5 лет назад

    what theme do you use?! ✨✨😬🙏🏻please

  • @MrFedX
    @MrFedX 5 лет назад +30

    Some constructive criticism. You don’t need that fast tempo in your video. You talk a bit too fast, you edit out pauses from your speach which makes it even faster and you jump cut code that’s appearing out of nowhere. It’s harder than it needs to be to follow. The pauses when you talk are needed to let what you say sink in. And code just appearing doesn’t give the eye something to follow. I mean, you don’t have to live code everything but at least add a fast forward when you code so the eye has something to follow.
    I do like the content of your channel so keep up the good work and I hope you at least take my pointers under concideration. :)

    • @crazythings9434
      @crazythings9434 5 лет назад +2

      Not sure I agree, there's a lot of other channels that are much slower, it's good to have a fast paced channel.

    • @nielskersic328
      @nielskersic328 5 лет назад +1

      Even though I frequently find myself rewinding and rewatching these videos, I like the fast pace. A lot of tutorials on RUclips are way too slow for me and I end up increasing the playback speed to not waste my time. Also, if you find yourself struggling to follow the video, there's always a written version on fireship.io

    • @rl_aaaa
      @rl_aaaa 4 года назад +1

      Well for me this fast tempo is perfect. I hate when video is slow and i always skip it because I don't want to waste my time.

  • @aseemwangoo
    @aseemwangoo 5 лет назад

    Nailed it!!!

  • @mattiaesposito5525
    @mattiaesposito5525 5 лет назад

    amazing you rock

  • @KL13923j
    @KL13923j 5 лет назад

    It is amazing.

  • @trophieboi1820
    @trophieboi1820 5 лет назад

    Love it......!!!!

  • @divinedela9125
    @divinedela9125 5 лет назад

    Great asa always

  • @stressed_by_mountain_of_nu334
    @stressed_by_mountain_of_nu334 5 лет назад

    Sir, for me when the viewPortFraction is < 1, the last page animates back to the second last page automatically.I tried with viewPortFraction = 1 and it works fine but not with viewPortFraction

  • @matanbenmoshe91
    @matanbenmoshe91 5 лет назад

    What editor are you using ? thanks.

    • @tsb906
      @tsb906 5 лет назад +2

      visual studio code d:

  • @SondreSrbye
    @SondreSrbye 5 лет назад

    Can you do a video about Bloc pattern in flutter?

  • @abdo_star3
    @abdo_star3 Год назад

    How we can update the code with the new firestore package 🙏

  • @mohamedelyamani7845
    @mohamedelyamani7845 4 года назад

    Seems like you are a great developer please speak slowly and try to explain everything not to just copy and paste code
    You are teaching my advice to study some course about voice over you will be awesome! Cause you have a special voice

  • @azfarkhan3808
    @azfarkhan3808 Год назад

    Hi! Has anyone got complete code of this on GitHub. I am getting following error on Stream _querydb function
    Stream _querydb({String tag = 'favorites'})
    The body might complete normally, causing 'null' to be returned, but the return type, 'Stream', is a potentially non-nullable type.
    Try adding either a return or a throw statement at the end.
    I have solved most of other issues but this one is difficult to resolve.
    Any help will be appreciated.

  • @sokolikonomi2345
    @sokolikonomi2345 4 года назад

    In the latest version of firebase_core and cloud_firestore it throws the following error: "type '() => Map' is not a subtype of type 'Map'"
    Can you please show how to fix this ?

    • @mikhailcampbell994
      @mikhailcampbell994 4 года назад +1

      "type '() => Map' is not a subtype of type 'Map'" was the error i was recieving
      Here is what i did:
      1. class FirestoreSlideshowState extends State {
      final PageController ctrl = PageController(viewportFraction: 0.8);
      final Firestore db = Firestore.instance;
      Stream slides;
      CHANGE "Stream slides" to Stream slides;
      2. In the StreamBuilder
      I changed it up a bit to:
      return StreamBuilder(
      stream: slides,
      //initialData: [],
      builder: (context, AsyncSnapshot snap) {
      List slideList = snap.data.documents;
      if (!snap.hasData)
      return Center(child: CircularProgressIndicator());
      else if (snap.data.docs.isEmpty)
      return Center(child: Text('No Data avaliable'));
      return PageView.builder(
      controller: ctrl,
      itemCount: slideList.length + 1,
      itemBuilder: (context, int currentIdx) {
      if (currentIdx == 0) {
      return _buildTagPage();
      } else /* if(slideList.length >= currentIdx) */ {
      //Active Page deh yah so
      // ignore: unused_local_variable
      bool active = currentIdx == currentPage;
      return BuildStoryPage(
      slideList[currentIdx - 1].data(),
      pageController: ctrl,
      index: currentIdx,
      );
      }
      });
      });
      3. then for the slides in Stream _queryDb
      i replaced:
      slides = query.snapshots().map((list) => list.documents.map((doc) => doc.data));
      with: slides = query.snapshots();

    • @sokolikonomi2345
      @sokolikonomi2345 4 года назад

      @@mikhailcampbell994 how did you fix it ?

    • @mikhailcampbell994
      @mikhailcampbell994 4 года назад +1

      @@sokolikonomi2345 try the steps I stated above

  • @uonsopanha9789
    @uonsopanha9789 4 года назад

    How can I make navigator to another screen???

  • @gauravidesigns
    @gauravidesigns 4 года назад

    Love You bro

  • @rajdave9862
    @rajdave9862 5 лет назад

    OmNS how can I learn this like u ,
    On my own self

  • @nevit94
    @nevit94 4 года назад

    Como subo archivos a firestore con arrays?

  • @eusouanoticia
    @eusouanoticia 5 лет назад

    Parabéns

  • @deepjyotibaishya7576
    @deepjyotibaishya7576 5 лет назад

    and i understand how its works .

  • @mabdullahsari
    @mabdullahsari 5 лет назад +1

    React Native vs. Flutter?

    • @Fireship
      @Fireship  5 лет назад +1

      I did a little comparison video here fireship.io/lessons/flutter-for-js-developers/

  • @mubasheransari498
    @mubasheransari498 4 года назад

    how can we get multiple text data like index ? anyone help me please

  • @nullified__
    @nullified__ 4 года назад

    how do i orderBy title?

  • @victhorbecvicthorbec7367
    @victhorbecvicthorbec7367 4 года назад

    the title is not seen in my simulator

  • @emericgnonhoue7029
    @emericgnonhoue7029 5 лет назад +2

    Coool. 3rd

  • @shibatadashi
    @shibatadashi 5 лет назад +2

    4th so far :P

    • @Fireship
      @Fireship  5 лет назад

      participation medal 🏅

  • @JayPerf
    @JayPerf 5 лет назад

    You are a god haha

  • @jatinraj4974
    @jatinraj4974 5 лет назад

    Make card swipe video

  • @patrickk4164
    @patrickk4164 5 лет назад +2

    Your videos are just too fast for me man. I know they say to keep videos short but if I have to rewind 34 times cause you went to fast then I might as well watch a really long video that takes the time to explain the concepts. I'm not here for you to do my work for me. I am here to learn how to do my own work. Take some time to explain things and make your videos longer. Personally I am unsubscribing. In the end I learned nothing and just copied your text whilst rewinding 46 times. Watching it on half speed is not going to work for me cause I don't really want to sit here and listen to your voice in slow mo either cause I can't absorb the information this way. Thank you for trying to help others. You make the world a better place for your efforts. It's just too hard for me to learn from your videos. To be clear they are GOOD VIDEOS just way too fast......

  • @darshangowda309
    @darshangowda309 5 лет назад +2

    first :P

    • @Fireship
      @Fireship  5 лет назад

      gold 🥇

    • @darshangowda309
      @darshangowda309 5 лет назад

      @@Fireship This looks so cool. Definitely learning more about animation!

  • @rajdave9862
    @rajdave9862 5 лет назад

    Omnamahshivay
    Please tell from where u are learning this all amazing things in flutter

  • @ariseinvesting8759
    @ariseinvesting8759 3 года назад

    Hey i am having multiple errors
    1- 'Firestore' it says undefined class
    2- list.documents.map says 'documents' isnt defined for the type QuerySnapshot. Try importing library that defines 'documents'
    Please help me as i am implementing this in my current project

    • @sumankaran7253
      @sumankaran7253 2 года назад

      Hi, have you found the solution? I am getting the same issue. I changes documents to docs. The error is gone but getting red screen on app with error message Field 'slides' has not been initialized. Can you plz paste the main.dart here if you have solved the issue?

  • @rajdave9862
    @rajdave9862 5 лет назад

    Omnamahshivay
    Please tell from where u are learning this all amazing things in flutter

  • @rajdave9862
    @rajdave9862 5 лет назад

    Omnamahshivay
    Please tell from where u are learning this all amazing things in flutter