Flutter Story App UI Concept - Speed Code
Вставка
- Опубліковано 15 вер 2024
- Thanks for Watching :)
Make sure to like + Subscribe For More!
Source Code: github.com/dev...
Design Credit: bit.ly/2G24Clt
check out Frank Doyle's Repo if you're trying to figure out how Story Slider works.
bit.ly/2ZegRTt
Also Check out those Awesome Flutter devs.
Simon Lightfoot : bit.ly/2UTadmx
matthew carroll : bit.ly/2VJIr93
Marcin Szałek : bit.ly/2KE76uO
Frank Doyle : bit.ly/2UiHBP2
Pawan Kumar : bit.ly/2UBkIeX
I learn a lot From those Awesome People.
Thank you :)
MUSIC CREDIT - APE ONE
YT ⇒ www.youtube.co....
FB ⇒ / ape101
IG ⇒ / ape.one
buy / lease (custom length) ⇒ ape.one@o2.pl
If you slow down the videos and explain the design you'd be golden.
Even i want that. It'd be just perfect.
this!
+1
Just slow downd the video in the settings
i think this isn't the video proposes, be fast is the idea
Guys, the purpose of the video is not to be a tutorial, is to be like an "art", the art process, just appreciate. Is speed code, not tutorial
wise words right there fellows
dude, this is awesome :) please make more. you are not just a programmer, you are an artist + programmer. God bless you
As a person who's thinking of learning Flutter, I got the main idea of the development. This video won't make me build an app from scratch all of sudden but it sure will be my lighthouse. Thanks!
*DUDE, pls take a moment to create a play list. It would take only a couple of minutes; however, would help us a lot. Please. You're fucking awesome btw. Thanks for these.*
You should be the next Fluttery channel. Hope he will comeback. He got hired by the flutter team :(
are you serious? wow
so that's the reason he hasn't uploaded since the past 9 months....his tutorials were too good, i wish he does come back
dude he's been working with google since the beginning
Can you give me the link of the channel ?
@@nirajandata liinkk please
He deleted his channel, twitter and everything related to his projects but I found all his projects here in reddit. Hope it helps!
drive.google.com/drive/mobile/folders/1oBAzq_6IfVRzahv5M0YLyuUEnWeEhG14?usp=sharing
Flutter Headphone App Store UI: ua-cam.com/video/w45GyPYTEU0/v-deo.html
These videos are amazing. I will eventually re-watch them because they show you how to style. I personally HATE how you style in Flutter but at least you show us what to use since we have to basically learn a new way to style, rather than using css like you can in React Native
I don't know and understand but It looks satisyfing , I like watching videos like this in my study break . Nice video .
honestly, an explanation will go a long way, why you do what you do. Great Video btw
it's good to see you are writing code for the UI rather than using GUI builder in android studio
I really love your channel and works.
Please work on Flutter transitions like slides, zooms... etc
Dude you are a legend. Hope you the best
Wish I were this good at making anything. Cool video man. I love it!
Ohh man you're super pro dev, this is the real meaning of full stack developer
how can we add click events for the individual card in this design? i tried using inkwell, gesture but it didnt work
faced the same problem here :( tried so many things. Did you find a way to do it?
The beauty of coding. Great video!
Hello everyone, Somebody know how is the emulator used in this video? Is the Android Studio's Emulator (AVD)? Thanks
Use android studio , add virtual device
If this is modern art, you are modern artist! dope
The nested blocks remind me of callback hell.
lol)))
custom icon not showing properly, did same as shown
Looks like this borrows heavily from github.com/fdoyle/flutter_demo_movies/blob/master/lib/main.dart, so check that out if you're trying to figure out how it works. (and tbh, I'd appreciate some credit if you're going to straight copy my code, especially since there's no license on it)
how to give the card click event? I tried gesturedetector for almost every part but it didn't work
please help this, im facing the same issue
@@foodcolek8812 İf you need design like this, u can use flutter_swipper package. github.com/best-flutter/flutter_swiper
Is it possible if i want to set onpress in to every card and make it go to different page by press the card ,Thank you.
have you acheived this? i'm kinda stuck
Stack(
children: [
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) =>DetailsScreen(index)));
},
);
},
),
)
],
),
We need little voice-over which will make you the best
yep definitely agree with you
Nice piece......I can't wait for you to do a video of flutterpdfviewer
What should I add as a delegate to CustomSingleChildLayout? As delegate is required.
Hello, do you mind if I use this layout in my app?
Would you mind explaining how you're getting the story titles?? Like, where is it defined, the title for each image??
Change speed to 0.25 and done thanks for the awesome tutorial
Where do you get those resources? Like images icons? And what fonts you have user in the app?
Great job, I'm following your publications, thanks.
I need to know how ti implement ontap widget in those cards?
InkWell(
onTap: () {},
child: cards
)
that usually works.
Stack(
children: [
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) =>DetailsScreen(index)));
},
);
},
),
)
],
),
I've not get the idea is the cards moving?
i just wan to say, that's amazing
How to make the card a button which can go to another page?
use a container give it white color give it some shadow and surround it with gesture detector and use on tap property i have mad some tutorials using these you might like to check them out
how do you remember all the codes ?
History of every thing app design
You must have been tired if seeing this kind of comment but ...
I am a simple man, I see flutter. I click . like and subscribe 😊😊🍻🍻
Dear, you are a great TIME saver for me, using your source code I can create my own app's..
Which program?
hello Devefy, a question, where can you put an onTap or onPress to interact from one page to another?
which extension is used to auto comment the end of functions ?
hi dear no extension is required in flutter vs code and android studio will automatically apply comment at the end of ur function which provide an extreme good readability and understandibility and its the beauty of dart and flutter sdk
How to add gesture detector on that know more button?
encountering "A RenderFlex overflowed by" if you have more pages.... :( ...
Just a small request. Can you have the flutter tutorials in a playlist.
music name?
From where you get the value of icon menu??
Wow that was awesome I wanted to use something just like this stack in my project a week ago
your playlist link?
Great work as always :)
can you add asimple example about flutter with blouetooth
thank you
You readed my mind.. loved it✌️❣️
Seriously, amazing.
4:30 music?
Very beautiful design!
what's the song used in first 3-4 minutes
bro you;re legit, slow and explained will be amazing
If you slow down and teach everyone the concept it would be diamond...
Can someone explain the whole math part ???
1+1=2; 2+2=4, etc...
Congratulations, the design is beautiful! How do I give onTap to the card with pictures does not work.
to everyone don't know why "GestureDetector" is Ignored:
GestureDetector is not working inside the PageView Like this ,so if you wanna put it inside PageView you have put this "behavior: HitTestBehavior.translucent",inside GestureDetector then gonna working
@@alaalahlouh
This is how I solved it:
return Stack(
children: [
buildAspectRatio,
Positioned.fill(
child: PageView.builder(
itemCount: widget.list.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Opacity(
opacity: 0,
child: ElevatedButton(
child: Container(),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (_)=> widget.list[index].route));
},
),
);
},
),
)
],
);
@@tugrulhancnar7882 it's ok but this cliched solution
try this Pls:
return Stack(
children: [
buildAspectRatio,
Positioned.fill(
child: PageView.builder(
itemCount: widget.list.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Opacity(
opacity: 0,
child:GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (_)=> widget.list[index].route));
},
),
);
},
),
)
],
);
Excelente gracias, muy buen video. Saludos desde Colombia
Why app preview in the beginning of the video looks like 10 fps lol
Because its running in debug mode. Release version should run at 60 fps
It could have been more better if included detailed explaination of that vertical scrolling part , that seems really confusing for me to understand . would u plz just do that again with explanation , m really looking forward to understand such overlay scrolling concept.
Thanks Im learning fast
What is the software u'r using here ??
and how to make it runnig instantelly ??
Its Visual Studio Code I think
It's visual studio code, with Android ADV running on flash reload. Whenever you save your code, it hot reloads the changes.
He has autosave on in VS code, thus, the changes are translated instantly on screen
Can we ditch java and reprogramm android os in dart?
That intro slaps like a truck
Wow wow I can't say anything just amazing
Nice Work as usual! I have a question about the story card, how can we add ontap on positioned widget in Stack?
man, i have this problem and I couldn't make it work hauhauhau
I also have this problem
I faced the same issue too...
Stack(
children: [
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context) =>DetailsScreen(index)));
},
);
},
),
)
],
),
@@adomejado400 tried this method, but it won't work. In the end, I used another widget ---> flutter_swiper. Solved my problem immediately
I want to build an app, should I go for native android studio or go for flutter??? I want best & buttery smooth user experience. I'm quite Sceptical about developer support for flutter.
Go for native as it is more stable and has a smooth user experience
@@ruchitsawalkar7672 thanks for your valuable suggestion.
both are viable, if u want just android, native or flutter are good. Anyway I recommend Kotlin against Java if you going to native, is so much better, if u want multiplatform, go to flutter, in my case I program only for Android, a few months ago I used Kotlin, now I change for flutter, I thought lighter then native, design in xml is not my vibe
You are the Best!!!!!!! Congratulations!
Could u please make video on payment gateway integration on flutter app like for credit card, debit card, PayPal payments.
Which font you are using ? Can any one tell me.
Great ! Where did you make the images from ?
Amazing! Thanks for sharing!
If you slow down and teach everyone the concept it would be platinum
2:02 can someone explain me how to ADD PADDING? Is there any Shortcut or something? Thx
ctrl + Shift + R ( For Windows ) You will get the refactor menu. Just select " Add Padding "
This will work if you click on the widget name you want padding for.
basically surround your widget with either Padding widget or container and use padding property : EdgeInsets.symmetric(vertical:20)
what i want is how to create that slider .if there's anything. I can read to help me
How can I download this app
Great job!
And i have a question...
How to reach this level
Is it just by reading and understanding the flutter documentation with a programming background or something else?
that and also with experience
Amazing, keep on excelling.
Can you make a video about making a plan map type layout like candy crush game.
Edit : scrollable map with awsome shapes in the background.
Outstanding, bravo!
Did you submit this to flutter contest?
05:07... anyone know, why the image doesn't show... and also i don't see any error message
did you find the solution?
Same I can't see any sliders
Thanks for the code man!
try to create and build ur own
Likes from Brazil, soo goood!
Amazing.. where can I find those beautiful pictures used in stack widget? You draw it?
Dude just search on Google "Free illustration" there are bunch of free illustrations out there
Hi, How to make card slider to infinite loop? Thank you anyway
can you help i try to do your tutorial but i get an error in my vs code
this is below***************************
This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: CardScrollWidget.currentPage, CardScrollWidget.padding, CardScrollWidget.verticalInset
Is Flutter available in website ?
Seems it's very lux in website too
can i use this carousel for n number of items
Yes you can.
Which programming language is that?
Super cool, use question, what kind of skin do you use for the Android emulator?
Pixel 2 xl
what do you take for anxiety ? I would be stressed easily if I was building this UI :(
Why would you be stressed? It's quite simple, nothing magical here, just good understanding of Widgets and a little bit of maths to align items correctly and detect in which way the cards are swiped. :)
@@spiderous sorry for late response, I've been thinking about your reply and I think you are right, it is me I don't have good understanding of Widgets nor Flutter :(
@@halfrockstarpro6412 So practise it. You must put some effort to achieve a good understanding of every topic you want to learn. Find something motivational to make yourself acquire new knowledge, it's that simple :)
how can i built it in web devlopment
how else watch just for Music.
Music name???
Hi i love this concept now can i use this as the front end of my app? is there more works to do backend? please explain or just show a tutorial on how to build a flutter app
Can you please tell me how much time you required for learning to code in flutter
about one year
@@Devefy thanks
This is amazing!