Это видео недоступно.
Сожалеем об этом.

Flutter Responsive UI: Google Clone

Поделиться
HTML-код
  • Опубликовано: 15 авг 2024
  • Learn how to build completely Responsive Google Clone using Flutter - fetch results from Google Custom Search API & Pagination!
    #flutter #ui #responsive
    Source Code: github.com/Riv...
    Important Links:
    colors.dart File- github.com/Riv...
    Translations Text- github.com/Riv...
    Images - github.com/Riv...
    Dummy API Json - github.com/Riv...
    Google Developer Console - console.cloud....
    Google Custom Search API - developers.goo...
    Context Key - cse.google.com...
    Timestamps:
    (00:00:00) Demo
    (00:01:20) Prerequisites
    (00:01:36) Creating & Setting Up Flutter Project
    (00:04:12) Creating Responsive Layout
    (00:10:59) Main Screen AppBar
    (00:21:11) Main Screen Body
    (00:43:36) Main Screen Footer
    (00:50:39) Making the Main Screen Responsive
    (00:59:50) Search Results UI
    (01:29:41) Getting API & Context Key
    (01:32:57) Building Search Results UI
    (02:00:08) Adding Pagination
    (02:08:13) Responsive Search Results UI
    (02:12:09) Changing Title Of Website
    (02:14:09) Making Some More Changes
    (02:17:31) Conclusion
    Dependencies:
    Flutter SVG: pub.dev/packag...
    http: pub.dev/packag...
    Dio: pub.dev/packag...
    Url Launcher: pub.dev/packag...
    Connect With Me Here:
    / optimalcoding
    namanrivaan@gmail.com
    github.com/riv...
    / namanrivaan

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

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

    Appreciate the unique project you've brought to us.Hope we will see consistant unique projects in future as well.

  • @saaniiddris7092
    @saaniiddris7092 2 года назад +2

    All your projects are amazing.. we really appreciate the good work of yours

  • @jashwanthgowda4331
    @jashwanthgowda4331 2 года назад +1

    Thanks, rivaan for this tuts and waiting for more like this

  • @kristen8156
    @kristen8156 2 года назад +1

    Great work again. Love from Nepal.
    Need state management and API project tutorial... Once again thank you for such a great tutorial

  • @darshanbafna7843
    @darshanbafna7843 2 года назад +1

    Great work Done Rivaan.
    God bless you ❤️

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

    This was super insightful, thanks a ton for sharing such ideas with us!

  • @onyemaanthony
    @onyemaanthony 2 года назад +1

    Awesome projects I subscribed to your channel immediately I saw your WhatsApp clone please be consistent with the content your channel will teach millions soon thanks for the contents

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

    thanks a lot rivaan
    learned a lot from this tutorial

  • @AnkitKumar-vd2dd
    @AnkitKumar-vd2dd 2 года назад +1

    mast tutorial banay bhai!!

  • @Ankur-zd4db
    @Ankur-zd4db 2 года назад

    Op 🔥 i like your video bro .. make more interesting project you got one more subscriber

  • @EveryThings-os2of
    @EveryThings-os2of Год назад

    please create a video on admin panel responsive in web

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

    Thanks!

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

    Is very Awesome learning #Flutter

  • @petersonpandiangan8363
    @petersonpandiangan8363 2 года назад +2

    India people is great

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

    You are awesome bro

  • @venkatesanjayaraman2987
    @venkatesanjayaraman2987 2 года назад +1

    Is it possible to use free search engine option (js form)offered by google

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

    Can you make a tutorial on BMI calculator app with exercises suggestions pls?

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

    awesome...

  • @mnouman1552
    @mnouman1552 2 года назад +1

    Rivaan the screens are responsive from left to right, but if I resize the screen from top top bottom or vice versa, the I face an error of bottom overflow by pixels. On internet the bottom overflow solutions are mostly for when keyboard appears, but I can't find any solution for when I resize the screen from bottom to top or vice versa. Please provide a solution for bottom overflow when the screen is resized vertically.

    • @RivaanRanawat
      @RivaanRanawat  2 года назад +1

      You can try wrapping with SingleChildScrollView Or using Mediquery for specifying height.

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

      @@RivaanRanawat
      When I use SingleChildScrollview,the body goes blank,but if you remove Expanded widget from parent Column,then childscrollview works,but after than we face another issue and that is the fotter goes up,and get attached with above column,I've tried padding,sizedbox but when I resize the screen the fotter again goes up,please provide a soution.

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

      @@RivaanRanawat Sorry for inconvenience,but I wan to learn responsivness for every size of screen even for a 3 or 4 inch screen.

  • @sumitkumar-pm1ic
    @sumitkumar-pm1ic 2 года назад

    Please make video on flutter + custom backend (Node , express, mongoDB)

    • @RivaanRanawat
      @RivaanRanawat  2 года назад +1

      Sure! In the meantime, u can watch Skribbl.io Clone Project with Node.js & MongoDB: ruclips.net/video/afCVHB2xm-g/видео.html

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

    How to solve "Bottom overflowed by XX pixels" problem?

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

      Try wrapping the parent widget with SingleChildScrollView. If that doesn't work you can use MediaQuery instead of passing constant values.

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

    27:55

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

    The main thing of this project you are not explain. How to get live on internet as "web" search engine

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

    Nice project implemntation, but i followed along but my pagination doesnt seem to work though there is no error and the code is the exact same but my page doesnt load the next 10 results! is there any suspectable mistake that i could have made?

    • @RivaanRanawat
      @RivaanRanawat  2 года назад +1

      Have you loaded the page multiple times? Because you can only get a maximum of 100 results in a day.

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

    How to get live this on internet ??? How to debug apk ??? Separately

    • @RivaanRanawat
      @RivaanRanawat  2 года назад +1

      You can use Netlify/Firebase/Heroku to deploy the website.

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

    Can the course be followed with flutter latest version?

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

    Sir how to create home service app backund php

  • @MuhammadAdnan-vs5cx
    @MuhammadAdnan-vs5cx 2 года назад

    Getx k sth kia kro bhai

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

      Will be using that in the next video ;)

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

    You are great guy but your too fast...we aren't able to catch up with you bro, otherwise 💯💞🙏

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

      I'll keep that in mind, thank you for the suggestion🙂

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

    Whatsapp clone with functionality please

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

    WTF did you do at the end

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

      Can you please mention the timestamp at which you didn't understand?

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

      @@RivaanRanawat its fixed
      i am getting error in getting SHA1 key 🤕