‼️ *Task1: Flutter App Development*‼️
Objectives :
1.Create a flutter app.
2. Use assets (eg. audios and videos).
3. App will have to play this audios and videos from Assets.
4. Also add Features to play audio and video from Internet(Network).
5. Create buttons like play, pause and stop for audio and video both.
>> THEORETICAL PART :
#FLUTTER
1. Flutter is a tool by google which is used to build mobile apps. It give us a beautiful UI/UX or we can create beautiful apps using flutter and app will be simple and clear to use.
2. Flutter is a framework or a platform and on the top this platform we can write code in dart language. Dart is one kind off declarative language by google and it is compatible with flutter.
Note :
* Flutter has a capability to build desktop based app also.
* You can also create a webapp using flutter and this project is known as flutter for web or hamming bird project.
3. So we know flutter can understand dart language and on the top of flutter we can write code and after this we can build or compile the code and convert it into web app , mob app and desktop based app.
#Installation_of_flutter
1. Flutter is very easy to install because it give us a archive file in a rar or zip format. So we can easily extract it and start using flutter after setting the environment variables.
2. After installing flutter , ask flutter for convert code into mob app , webapp i.e for compiling or build , you need a software development kit that means Android SDK or iOS SDK.
3. For SDK we can directly download, install and use SDK on android. But we have a one more way that is with the help of IDE i.e integrated development environment we can achieve the requirement of SDK in flutter. So for this we are using Android Studio as a IDE because it easily convert your dart language code into android SDK and why we install Android studio because it also give us some more tools which help us in mob app development such as :
* Android SDK build tool.
* Android emulator.
* Android SDK platform tools.
* SDK tools.
* Google USB driver.
* Intel x86 Emulator accelerator ( hardware acceleration execution machine ).
So after installing the android studio in the environment variables set the variables as ANDROID_SDK_ROOT and set the value as path of your android SDK.
4. We can create a mobile phone platform using a software .. here we can use Base OS hardware and create virtual OS for Android that is virtual device known as android virtual device and basically we are using this for testing our code. Android Studio give one option for AVD manager and with the help of AVD manager we can launch multiple AVD . Internally they are using Virtualization and in the mobile world it is known as emulator.
5. Development of app is fast in flutter but it is also fast in compiling or building the code . Internally it uses SKIA engine ( it is a graphics rendering engine ). Flutter is fast because of Hot Reload . Hot reload maked development faster. Hot reload don’t reload complete code if you change something they can compile that part only.
6. For writing a code in flutter we can use visual studio code IDE because it has a option of start debugging. When you click on start debugging it will first start our AVD and then run our code and when within a second our app will be deployed. In visual studio code we can use ctrl + s for saving as well as for hot reload purpose.
#SomeBasicCommands
1. “Flutter doctor” : this command is used to test our environment.
2. “Flutter devices” : this command shows how many devices connected.
3. “Flutter emulators — launch emulator name” : this command is used to launch our AVD.
4. “Flutter run” : this command is used to run our code.
Note :
* Lib file is a main file for our codes.
* For building or compiling our code we can use gradle build tool for Android.
* After code is build they used an extension in apk format i.e android application package.
#HowToRunACodeInOurRealMobilePhone
7. For this you have to write a code in a dart language then build it into package having apk extension for Android, when APP is created for copying , installing and running you have to need an android mobile phone… You can also use AVD for running your app but for real use and feel we have to use Mobile phone. And also AVD consumes around 3 to 4gb of ram space. So if you don’t have so much ram AVD won’t work. So we can use real mobile phone instead of AVD.
7. But by default android not allow copying, installing and running you code for security reasons. For this you have to enable the copying feature. Change the mode of your mobile phone to developer mode and also allow USB debugger.
* Go to phone settings.
* Then go to about phone.
* Then click on the build number seven times.
* Then your mobile phone is into the developer mode.
* Then enable developer option in additional settings.
* Inside the developer option you have to enable USB debugging and install via USB.
After all this you are ready to go to use your real mobile phone for deploying mob apps but for this you have to connect your mobile phone into your Laptop USB port using USB cable.
8. Flutter give us precreated modules such as material.dart
9. Flutter also give us precreated functions such as runApp() for running the app.
10. Flutter also have some widgets such as Material App
Code : runApp(MaterialApp(home: Text(“LW”),));
When you deploy this you will see LW on the top of your app.
11. DART PAD : It give us online interpreter to practice dart online.
12. Creating a variable help us alot.
Suppose I am creating one varibale x = “hello” here hello is one data that I have stored in the variable called x , hello is a word so it is a string data type we always write a string in ‘ ‘ or “ “ , Don’t put ‘ ‘ or “ “ in a variable. if I create one more variable x = 1 here 1 is a number and it is integer so it belongs to the int data type.
Example :
main () {
String x = “hello”;
int y = 1;
Print(x);
Print(y);
}
13. But instead of writing int,string we can use var basically var is variable it dynamically or automatically understand the datatype.
Example
main () {
var x = “hello”;
var y = 1;
Print(x);
Print(y);
}
14. runtimeType : it help us to find what type of datatype is found by a dart.
15. If you have to stored multiple values in one variable you have to create a list of values.
Example 1:
main() {
var x = [ 1 , 2 , 3 ];
print(x);
}
So here the datatype is list and stored values are of int datatypes.
Example 2:
main() {
var x = [ “hi” , “hello”, “howdy”];
print(x);
}
So here the datatype is list and stored values are of string datatype
Example 1:
main() {
var x = [ 1 , 2 , “hello”, “howdy” ];
print(x);
}
So here the datatype is list and stored values are of object datatypes.
16. If you want to set a constraint that you only allow string or int won’t allow anything apart from int or string. So in the case we can use list datatype in place of var datatype.
Example :
main () {
list<string> x = [ “hi” , 1, 2, 3 ];
print(x);
}
But this shows error that it won’t allow integers so you have to remove them or replace them. Viceversa for int.
17. If you want to retrieve some item from the list of have to know the index no .
Example :
main( ) {
var x = [ 1 , “hello” , 2 , “hi” ];
// So if you want to retrieve hello from the list you have to know that indexing start from 0 so in this list 1 is present at 0 index , hello is present at 1 index and so on.
var y = x[1];
print(“y”);
}
18. But there is one challenge in the list that it is re-writable or mutable so we can change it. We are the one who’s giving the list values but internal system are giving index to these values but if we want to give our own index or own position so for this we have to link or map that position to the values and this concept is known as mapping.
Example :
main( ) {
var x = [ “name”:”addy” ,”no”: 2 ,”email”:”hi@amail.com” ];
// So if you want to retrieve an email you have to call your own index
var y = x[“email”];
print(“y”);
}
Here datatype is map and objects are in keyvalue pairs.
19. main () {
lw(); // here I am calling my lw function
}
lw() {
print(“hello”);
}
Here this function is static but we want this function to be dynamic for this we have to use the parameters and arguments.
main() {
lw(“hi”)
lw(“hello”)
// This is one argument function
}
lw(i) {
print(i);
}
20. Dart language is way to communicate with flutter to create an UI i.e basic look and feel.
21. By using dart language we can send data as output in three ways :
* As a console or terminal by using an print function.
* As a network by using an network send function.
* As a mob app by using an text function.
22. For printing the data as a output in the mob app we have a text function as a property, for directing our text we have a text direction property and for alligning our text we have a text allign property.
23. For example :
main( ) {
var db = { “name” : “addy” };
print(db);
}
In the above example I have create a map where I stored name as a key and addy as a value but in flutter world this key is considered or termed as a property.
24. MaterialApp function connect us to the material design for creating beautiful UI. Material design is a language by google for UI. material App compulsory use (Home:property).
25. For using the material design scaffold is the one who give us precreated design. It give us appbar , body etc.
26.appBar : it is a property for creating top box or display something at the top. It contains :
* Title : for printing the text.
* Background color : for choosing your app bar color.
* Leading : it helps us to place an company logo at the left corner of the appBar.
* Action : it is one kind of list to perform multiple properties.
27. There are two types of icon :
* Normal icon : not clickable
* Icon button : it is a own press event that when you press something it will do something for us.
28. Refactor : it is way to wrap something. For example parent child relationship of center and text.
29. Print image in the body using image.network(src) this property is used to pulling your image from the internet here src is a basically a URL.
30. In the scaffold we have one property known as body that contains text, images and other things. In one body we can only put one text or one image or we can say that we can only put one thing. But if you want to put lots of things on the body here scaffold body property fails . To overcome this concept we have to use one widget that provide us a capability to put Multiple things or text , images , videos on the body.
31. First of all now what is widget ..? In flutter whatever we create our app UI or look and feel , for everything we need a widget. Everything is the widget in the flutter. Or we can say that every function in a flutter should be a widget function. Whatever thing you display is basically a part of widget.
32. Widget contains :
* Container
* Center
* Scaffold
* Text
* appBar
* Icon
* Images
And tone’s of things.
33. Container : for creating a box or boundary in the body we have a container function :
* Container give us lots of flexibility and advance property but container only accomodate one child.
* in container We have a capability of width, heights,color, child , alignment, decoration, images etc.
* In the container we can put Multiple things like text or images and we can put container inside the container.
34. If we have requirement to put Multiple child or children i.e multiple images , text in the box then here container fails because container only accomodate one child. Then the role of column widget come in play. Column widget provide us a capability to put Multiple child or children in one box.
35. HOT RELOAD : as soon as you save the file or code automatically we update the code without restart. In this scenario we maintain the state and we quickly check the difference when you change the code.if we have a bigger code and suppose we have to do changes in the title of appBar so why we have to rebuild whole code , rebuild only appBar widget part. This capability is known as hot reload.
36. ENABLE HOT RELOAD : for enabling the hot reload ask our flutter to main the state. We need one variable or keyword know as build context for maintaining our current state or hierarchy and Build give us a capability to store build context. Basically Build maintain our current state and build is actually a part of stateless widget module.
Note : there are two type of states
* Stateless state.
* Stateful state.
37. In the programming world specially in a dart language or any other. Program file is known as a module, function is known as a method and when we wrap all the modules to create a bundle that bundle is known as packages or libraries. And we always install flutter packages on the top of dart language. SDK of flutter give us complete modules.
Note :
Pubspec.yaml script file shows us about the flutter packages.
38. If we have flutter packages with us but only from this package most of the things we can’t do such as checking the battery status,change color of status bar and gps etc. For getting this kind of packages we need to install extra libraries. By using pub command we can call the libraries in dart. And we can go to pub.dev here we find extra libraries for extra works that not have present in flutter packages.
39. We can copy the library name with Version from pub.dev and we can paste it in the pubspec.yml script file and then we do ctrl + s in IDE and our IDE download and installed that library automatically for us.
40. Toast library : it used to generate pop ups.
41. Status bar Library : it used to change status bar color.
42. Body is a property it can only take one widget at a time.
43. container consume 100% space but we have to use double.infinity in width and height.
44. distance between two border or we can say that distance between two widgets is known as a margin. Margin is one kind of variable . Inside the margin we have EdgeInsetd.All() function that create distance between two widgets.
45. Container only support one child. the height and weight of the container is by default depend upon the pixel used by your screen or child. So if you change something in the child main container also affected.
46.within the box when you have to give the spaces for data from all the side is basically known as padding.
Note : border ,margin and padding commonly known as box model.
47. When we have to use one box or one widget on the top of other box or other widget, for this we have to use stack widget and they always draw first child and then draw second on the top of first.
48. inside the container column and row child don’t follow alignment function they follows mainAxisAlignment function.
49. Inkwell give us a capability to do something. It also have a child. If you do tap or do something on the box it is known as a trigger. And for triggering we have to use an event like ontap , ondoubletap etc. But instead of inkwell we can use gesturedetector because it contains lots of events and inkwell is older nowadays.
50. Refactor : it is way to wrap something. For example parent child relationship of center and text.
51. Inside the string when you are running with some operation or expressions it is known as string interpolation.
52. If you have two argument or parameter you have to pass two values and they will assign according to the position.
53. when you directly assign argument or signature of function in the variable without function so you don’t give function a name and it is known as nameless or anonymous or lambda function.
For example :
void main ( ) {
var h = (a,b) => a+b;
print(h(2+3));
Here => this sign indicates lambda expression or fat arrow.
54. Function is also one kind of data type in a dart language.
55. One of the rule of a functional programming is lambda which make our code more readable.
56. Function has also have a capability to pass function as a argument and that is known as higher order function. thyroid dysfunction is also a one kind of functional programming approach.
57. A parameter which is wrapped by [ ] is basically a positional parameter.
58.Dart allows to assign default values to parameters in a function. Such a function is called Default Parameters.
59. In the case of named parameters, the sequence does not matter.Variable names of the named parameters should be same.
A curly bracket is placed around the named parameters.
60. Card Widget : they create a small box which is lightly shaded or curved that give us 3D effect. It contain a child. Card consumes that spaces which is only child consuming.
61. Column : child of column displayed in vertical direction.
* mainAxisAlignment : it works vertically in the column.
* CrossAxisAlignment : it works horizontally in the column.
62. Row : child of row displayed in horizontal direction.
* mainAxisAlignment : it works in horizontal direction in row.
* Crossaxisalignment : it works in vertical direction in row.
# Practical Part :
>> Creating Flutter App :
- By running one single command “flutter create task1” we are able to create one demo App.
- Now i am going to open this app in my visual studio code IDE.
- Here you can see in the lib folder i have created four new files as offlineaudio.dart , offlinevideo.dart , onlineaudio.dart and onlinevideo.dart and lib folder also contain one main.dart file by default because flutter by default read this main.dart file only.
>> main.dart file : includes -
- Url launcher package which i have exported from the pub.dev in the pubspec.yml file and import it and i am using this in my app for redirecting the LinkedIn, GitHub and Spotify App.
- Flutter Toast package which i have also exported from the pub.dev in the pubspec.yml file and import it and i am using this in my app for toasting one of the text.
- Drawer Property of scaffold widget which contain one logo as a drawer header and four list tile that is OFFLINE MUSIC, ONLINE MUSIC, OFFLINE VIDEO AND ONLINE VIDEO.
- In the OFFLINE MUSIC, i am picking an audio from the local assets and vice versa for the OFFLINE VIDEO.
- In the ONLINE MUSIC , i am picking an audio from my GitHub repository and vice versa for the ONLINE VIDEO.
- I also use navigator.push function for pushing these four list tile to the new screen.
- In the App Bar property of scaffold widget , i create text widget and three Icon Button.
- In the Body property of scaffold widget , i use container and row widget , and some of the properties like decoration, margin, gesture detector.
>> offlineaudio.dart : includes -
- In this file i have written the code for playing an audio from the local asset and linked this file with the navigator.push function for OFFLINE MUSIC tile.
- I also exported audio player package from the pub.dev in the pubspec.yml file and import it.
- Here i use the body property of scaffold and try to add cover image and make it highlighted and i also add One Icon Button and i linked with an audio which is present in my local asset and when someone pressed on that Icon music plays.
>> onlineaudio.dart : includes -
- In this file i have written the code for playing an audio from my GitHub repository and linked this file with the navigator.push function for ONLINE MUSIC tile.
- I also exported audio player package from the pub.dev in the pubspec.yml file and import it.
- Here i use the body property of scaffold and try to add cover image and make it highlighted and i also add One Icon Button and i linked it with an audio which is present in my GitHub repository and when someone pressed on that Icon music plays.
>> offlinevideo.dart : includes -
- In this file i have written the code for playing an video from local asset and linked this file with the navigator.push function for OFFLINE VIDEO tile.
- I also exported video player package from the pub.dev in the pubspec.yml file and import it.
- Here i use video controller property for playing an video and create one icon button and make it initialized with the pause and play action and i also add one moving slider with respect to the duration of video.
>> onlinevideo.dart : includes -
- In this file i have written the code for playing an video from my GitHub repository and linked this file with the navigator.push function for ONLINE VIDEO tile.
- I also exported video player package from the pub.dev in the pubspec.yml file and import it.
- Here i use video controller property for playing an video and create one icon button and make it initialized with the pause and play action and i also add one moving slider with respect to the duration of video.