Flutter Hacks!!!
###################### I AM RICH APP. ##########################################
* The main function is a starting point for all of our flutter apps.
* Almost everything you seee in flutter app is a widget.
* Material App is father of all the widgets.
* Scaffold is a second father of all the widgets.
* In scaffold we have app bar, body and floating action button and much more.
* Title: text() -- > here title is a property and text is widget.
* There is image propery in which we can put Asset Image ( Which comes from our device folder and network image which comes from internet).
* In dart code for string we use single quotes not double quotes like in java and swift.
* Center widget is used for centering the widget.
* use Alt+enter to wrap with the widgets
* use draw.io to draw the layouts.
* Yaml file are type of file which human also understand along with the machines.
* Add configuration for Asset images in pubspec.yaml under assets section.
* use appicon.co to generate icons for your app.
* To change the icon for android app go to android-app-src-main-res then replace the files which you generated from appicon.co from android then you are good to go...
* To change the icon for ios app go to ios -runner-Assets.xcasscet then replace the files which you generated from appicon.co for ios then you are good to go...
* you can do some settings to make app icon circular or whatevery you want, watch angelna how she does.
################## MI CARD APP ###################################
* You can also clone the project from the Github to android studio by clicking the option of open from the version control system.
* We can use hot reload and hot restart with the flutter stateless widgets
* hot reload and hot restart are used to make an instantaneous changes in our app
* Although there is a small difference between hot reload and hot restart, in hot reload you don't lose the data that you have put in your app it will affect only what you change but in hot restart, you will lose your data and it will also affect on what you change.
* Layout widget is used for layout your widgets
* Layout widget is of two types first is single child widget and multi-child widget
* In a single child widget only one widget is possible means either you can have a text widget or an image widget not both.
* In multi-child widget we can have multiple widget.
* Safe area is a safe area in mobile.
* Row widget goes horizontally and there are lot more properties you can change of that.
* Colum widget goes vertically and you can also change lot more properties.
* Circle Avatar is a place where you can put your image in a circle frame just like a profile pic in a circle frame.
* See in column we can put list of widgets not list of properties
* A property can have widgets and widget and can have properties.
* YOu can download the custom fonts from fonts.google.com where you get 1000 of fonts.
* Dowload the font unzip it and make a folder in flutter project name fonts and put there this downloaded file , in pubspec.yaml assign the path like in image we assign the path,
here assign the path.
* Sized box is used for spacing between the rows and the columns
* There are lots of icons from material design you can use.
* you can also set the property of these icons.
* Card is similar to container but it is more fancy and have small curve around its corner and has shadow around its corner.
* Card has not property called padding
* Padding class is a widget which can be added to another widget as a padding and give them little padding.
* Dekho ham row property ka use krke icon aur text ko row pe la skte hai aur fir sized box ka use krke ke space bhi la skte hai aur padding ki madad se hum padding bhi la skte hai. Pr usse better hai hum us property ka use kre jo CARD ke sath bhot famous hai and that is ListTile.
* ListTile has something called leading where we can add leading icon , then we something called title jisme hum apna content likh skte hai, List Tile automatically icon or text ke bich mai thoda space le aata hai, hme isme sized box ko use krne ki jrurt nhi padti.
* Card by default comes with white colour.
* main axis alignment of column is center
* divider class simply put 1px line in our horizontal screen.
################# DICE APP######################################################
* See sometime kya hota hai ki image bhot badi hoti hai and we put on the app wo poora mobile ka size le leti hai so we can assign width property but the problem with width is all the person does not have same size mobile so in order to best fit the image in all the device we use something called Expanded class.
* Expanded Class has to be a child of row and column
* We can use flex property in expanded widget to tell that ki ek image kitna space legi and other image kitna space legi.
* you can also embed the center widet and things like that from the flutter outline in side bar in android studio, this is quite easier way.
* You can add padding to make a space between the images.
* flat button is simple button which we can embed inside a text or widget
* flatbutton comes with 16 px padding , you can check in flutter inspector and then go on widget properties.
* Yellow line is warning in android studio
* On Pressed is required property which comes with flatbutton, this is used to tell what to do on clicking a button.
* Creating a function in Dart :-
1. Named Function
void getMilk ()
{
//do something
}
// calling a function
getMilk();
2. Anonymous function
onPressed : () { //do something }
// onPressed except a void function
* $ sign is used to hardcode the variable in the string, this is called string interpolation
* You can test your dart code under dart pad under writing your code in the main function.
* Dart is Static type language which means if you assign a variable as int, it cannot hold strings but you can make it dynamic by typing var as a suffix in the variable, means the variable can hold any value.
* When you are creating a user interface where the state of app isn't going to change then you use stateless widget like mi card app but if you are creating UI where the state of app is going to change then you have to use statefull widget, in case of dicce the image is going to change all the time.
* In the stateful widget you cannot use hot reload , you have to use something called hot restart.
* For updating the state inside the onPressed function we use set state method to specify that we are changing the state.
* In order to generate a random number we use dart math library.
##########################XYLOPHONE########################################
* Flutter packages are open source library of code which other people have created which you can incorporate in your project with minimal efforts
* Some of the packages are even created by google team
* Packages are some built in code which is written by great developer to help us. So that we don't need to re invent the wheel, just use their packages and do our related tasks.
* Passing the argument in function
* void main(){
greet(greeting: 'how do you do', personToGreat: 'jackie');
}
void greet({String personToGreet, String greeting}){
print('$greeting $personToGreet');
}
* if the function starts with void it means it return nothing, in order to return something from function ( which is third type of function we studied ) we use that data type instead void
example:
#Creating the function
int getmilk(int money){
int change = money-2;
return change;
}
# Calling the function
int change = getMilk(5);
* Dart Arrow function :
=> is used when there is only single line of code in the function
* Example
int add() {
return 5+2;
}
so the above function is equivalent to the below function
int add() => 5+2;
* Arrow function only work if you have single line of instructions.
* Arrow function can also take the parameter
############################QUIZZLER APP #################################
* See other widget like safe area has only one child means only one widget possible but row or coloum can have multiple childrens means multiple widget
* A list in a dart is group related piece of data in single list
* in order to create a list in dart we use a keyword List
ex
List scoreKeeper = [];
List <String> scoreji = ['hello', 'rishabh', 'gupta'];
List <Widget> scorke = something
# here icon is also widget so
List <icon> scokee = something
* .add is used to add something in the list
*dart list start with index 0
* .indexOf is used to find the index of the element
* .insert is used to add element somewhere in between in the list
.insert(2, 'Ben');
* We can check our deleted code or previous code in android studio, so to do this go to the vcs =>show local history=>boom bai bai
* if else statement in dart is as follow
if (track == 'clear'){
goStraight();
} else {
turnRight();
}
* A variable inside a class is called field or properties
* A function inside the class is called methods.
* A constructor is used to give value to the fields or properties ( for more info pls refer to class and object video)
* Uses of classes are to divide the task so ek class khana bna rhi hai, dusri class khana serve kr rahi hai, rather than ki ek single code base likho aur wo sb kuch perfrom kr rha ho, so the problem with single code base is when something goes wrong its diffcult to find an error
* Abstraction: - Being able to built more complex system by creating smaller pieces that have defined job or defined role so you can actually manage the complexity.
* We can also change the variable which come from a class to another class, that is where encapsulation comes into concept.
* so in order to not change the value from another class, what we do is we encapsulate the value in a class by making the variable private.
* we do in dart by simply adding _ in the front of the name of variable.
* Inheritance is when a class is being able to inherit the property and method from the parents.
* We use extends keyword to inherit the property from another class.
* when you are inheriting from the class , ofcourse some properties of that class come up , but sometime you want to modify the property, so we need to override that method or property that is where polymorphism comes in the concept.
* We use @override to do this.
* Constructor is part of code which convert the class into the objects
* By default dart give us empty constructor
##################### BMI CALCULATOR #############################
* Flutter themes is simply a way to define our custom color palettes and custom styling for the look and feel for our app.
* If you want to customize the theme for your app, then you simply want to add another property called theme in to the material app
* When you are implementing hex code in Color widget , we have to also mention about the transperency , and most of them are opaque and code for opaque is 0xFF
*Using copywith means that what you want to change in that particular theme, like in dark theme we override some properties
* We can change the theme of any button or things by using a theme widget
* In the BMI calculator you are seeing a lot of individual cards.
* We can extract the repeated widget and can make a class of that, this happens on selecting the widget and go to the flutter outlines section.
* final keyword makes the property immutable.
* instance variable = fields = property.
* Stateless widget are immutable so its property cant be changed that is why we are using final in statless widget property
* final and const variable value cannot be changed like
int a =2;
here a is a variable and we can change the value of a
a=8;
but if use like
const int a =2;
a=5; // this cannot be done
same with final
final int b =4;
b=7;// this cannot be done.
* final and const are looking same but there is small differnce between them and that is const cannot have access to anything when our app is running while final have access.
* like
const tm = datetime.now() // completely illegal
final tm = datetime.now() // legal
* if the differnce between the final and const is not clear to you, i recommend you to watch anglena final vs const
* Creating custom flutter widgets --
* Now we have to detect the button pressed and change the color , one option we have is to use flatbutton but flatbutton will change the size of the card and we don't want that so we use another button called GestureDector.
* Enum stand for enumeration
Enumeration is the action of establishing the number of something
* See enums are like a boolean but boolean only have two state true and false but enums have multiple state
* Dart Ternary operator
condition ? DoThisIfTrue : DoThisIfFalse
RishabhisGreat == true ? print("good") : print("not possible at all");
* YOu can also pass function as argument in dart.
*
Comments
Post a Comment