Flutter App Development | Flutter EBook App UI With Audio Player | Flutter UI Tutorial

This is a flutter App Development Crash Course Tutorial 2024. This would be flutter crash course for beginners how to build flutter app using beautiful Flutter UI and build an audio player. We will learn how to build an audio player using the AudioPlayers plugin and customize it further. This is the app ideas for Flutter Library app, Flutter Reading app, Flutter online book app, flutter ebook app.
Starter code link

BLoC, Riverpod and Getx video player app

Visit my patreon page to get the full source code with assets

Build Flutter App Backend With Rest API Step by Step

This app is compatible both for iOS and Android versions where we play audio from url. This audio streaming app you can play, pause, loop, repeat, fast forward and slow backward. This is also advanced flutter project.

This tutorial is suitable for e-book or audio player, education app building. You will learn how to build interactive app where we load assets from JSON files.

In this tutorial we have the below things
1. Creating projects
2. Loading assets
3. Load and read JSON files
4. Loop through decoded JSON
5. Building the UI for the audio
6. Use basic dart to load JSON file

The most important Flutter UI components or widgets used are down below
1. Stack Widget
2. Positioned Widget
3. NestedScrollView Widget
4. SliverAppBar
5. ListView.Builder
6. PageView.Builder
7. Material
8. BoxDecoration
9. DecorationImage
10. DefaultAssetBundle

See the next part of the tutorial in the below link

⏰ Timestamps in This Video ⏰
0:1:16 Create a project
0:2:25 Define the color globally in a separate file
0:3:48 Define safearea for your app in flutter
0:5:01 Show menu icon using an image at the top of your app
0:10:25 Top scrollable carousel sliding left to right or right to left for the app
0:22:08 Load JSON file
0:26:06 Loop through the decoded JSON file show the image dynamically
0:29:40 Scrollable tab bar
0:30:30 NestedScrollableView with Expanded Widget
0:31:30 Initialize ScrollController and TabController
0:33:50 headerSliverBuilder and it's function
0:42:37 TabBarView with it's content in ListTile
0:44:30 Style TabBar
0:55:10 TabBarView with scrollable content using ListView.Builder loop through
1:17:00 Get ready for Audio Player building
The main purpose of the tutorial is how to build an efficient audio player and load remote url and play them one by one.

Available use cases
1. audioplayers
2. Flutter_sound
3. video player
4. audioPlayer使用
5. soundpool
6. just_audio
7. audio recorder
8. Flutter pub
9. Flutter layout
10. Flutter introduction
11. Flutter Step
12. Flutter 教程
13. Audio player from URL or internet
14. Audio book
15. Audio player background flutter music player flutter ui design flutter audio ui flutter audio player

[yakut]

Recently started studying Flutter, specifically for developing an audio player. Came across your video. I will slowly master it. Thank you in advance. I struggle with the English language, but I'm trying.

You have my like and subscription.

Greetings from Novosibirsk!

[ed]

Thank you for this video. A suggestion: please don't collapse the code blocks in the editor as many we want to see the whole code as we are following the video

[moatasemabunema]

Great work!
Could you please put the Github link in the description in order to download the assets folder?

[mohanrajn]

I am very irritated on your channel because of the starting trouble but, I was excited by your explanation that's so good. the only thing is the introduction part is intimidating. keep doing well....

[angelkarki]

Excellent tutorial sir..
for beginners:
List popularBooks=[ ];
For initialization.. i think before it didn't used list of children for it..

[HasnainAshfaq-ry]

Boss Is Enjoying Coffee While Coding 😍 Thanks for these amazing videos we learn a lot of things from you. Love from Pakistan

[toyly]

This video was worth watching all those advertisements)

[azammughal]

sir only JSON images are not loading, it is taking JSON data length and loading title text etc, but not images only. I have provided the code below.

[ujumbewasiku]

I subscribed and turned on post notification. Thank you so much for sharing and may God bless you abundantly. I cant wait to share with you my project that is inspired by this video. Mega love from Tanzania

[yamkasudirman]

I'm confused about the part import because the url doesn't exist, do I have to set up the package first in the pubspec.yaml file?

[johnnyannan]

Great videos. Thanks a lot 🙏. Please keep more great videos like this coming

[son_kami]

Hi, I'm new to flutter and while going through your tutorial i got stuck at the scrollable tab bar (I'm ashamed of myself).
this is the error I get. I cant seem to find how to fix the problem

Performing hot restart...
lib/homepage.dart:15:6: Error: Field 'popularBooks'
should be initialized because its type 'List<dynamic>'
doesn't allow null.

- 'List' is from 'dart:core'.

List popularBooks;

video frame:
from
0:26:06 Loop through the decoded JSON file show the image dynamically
0:29:40 Scrollable tab bar

[androidtop]

Please I want an answer to these guys help Do I need to create a website first before creating an online Mobile App

[harshanacz]

20:48 use padEnds: false, on PageView

[NasaVedios]

The vedio that you share is not complete and you said that in the next part you'll tell the detailed ..where is the next part of this vedio???

[yakut]

If the device is rotated horizontally, the images stretch and deform.

I've been messing around a bit. That's what happened

double width =
double height = width * 0.8 / 1.78;
double leftShift = width * 0.05;

[dbes-tech]

Wow beautifuil UI. Can we get the original psd files for this?

[cotlas]

I mean with backend and payment gateway. paid books, free books, and coin system with daily coin earning upon login, sharing, reviewing, and listening, and later buying with those coins.

[kamalCode]

For backend can we DART use with Firebase or not. and why not. Explain in detail

[ahmedtrabelsi]

where can i find the starting code and assets please ?