FLUTTER
Form Widget Designing and
Navigation
MODULE 2 (PART 5/5)
REBAN CLIFF A. FAJARDO, MIT
INSTRUCTOR
FLUTTER
Social Media Clone
REBAN CLIFF A. FAJARDO, MIT
INSTRUCTOR
Mutable Button
Mutable Widget
We can transform any widgets into its
mutable state using the Stateful class.
We include an inline conditional statement
as the value of a property.
We sorround the value/variable to change
via setState function.
1
Create a stateful class named
SampleMutableButton as a Stateful Class with
Layout Center ->Column.
Add a TextButton.icon with label LIKE and thumb up
icon.
1
2
Add a final variable named isClicked as bool.
Create a method that implements inline condition
for toggle value. It must be surrounded by the
setState method.
Create two methods containing an inline condition
for toggle color for button, icon, and text.
2
3
Call the two methods as
value of the property
style for the button.
Call the clickButton
method inside the
onPressed property.
Social Media Clone
TASK:
Create a social media clone that integrates
the functionality for mutable button and
listbuilder.
Refer to the sample image:
TASK:
Create Friend Class
Create a model
folder and create a
User Class with the
following values as
properties.
This will be used for
the List of Friends
widget.
Create Account Class
Inside the model folder,
create the Account
Class with the following
values as properties.
This will be used for the
List of header widget.
Create UserPost Class
Inside the model folder,
create the UserPost
Class with the following
values as properties.
This will be used for the
List of posts widget.
Create UserComment Class
Inside the model folder,
create the
UserComment Class
with the following
values as properties.
This will be used for the
List of comments per
post widget.
Create UserData Class
Inside the model folder,
create the UserData
Class with the following
imported classes. This
will be used for the
creation of dynamic
lists.
Add List userList (1)
In the UserData
class, create a
userList with
basetype UserPost,
add add 3 entries.
This will be used as
the values for
posts.
Add List userList (2)
Add List userList (3)
Add List friendList (1)
In the UserData
class, create a
friendList with
basetype Friend,
add add 6 entries.
This will be used as
the values for
friends list.
Add List friendList (2)
Add List commentList(1)
In the UserData
class, create a
commentList with
basetype
UserComment, add
add 3 entries.
This will be used as
the values for
comments.
Add myUserAccount
In the UserData
class, create a
myUserAccount
variable
instantiating the
Account class.
This will be used as
the values for the
header.
Create SocialMedia widget
Create a stateful
widget named
SocialMedia with a
ListView layout.
Instantiate the
UserData object
and import the
class.
Create MainHeader widget (1)
Create a new folder
named views and
create a file named
mainheader.dart.
Create a stateless
widget named
MainHeader with
parameter
UserData.
Create MainHeader widget (2)
Call the MainHeader widget
Call the MainHeader widget in the SocialMedia Widget.
Create InfoHeader widget (1)
inside the folder
views and create a
file named
infoheader.dart.
Create a stateless
widget named
InfoHeader with
parameter
UserData.
Create InfoHeader widget (2)
Create InfoHeader widget (3)
Create InfoHeader widget (4)
Call the InfoHeader widget
Call the InfoHeader widget in the SocialMedia Widget.
add the shrinkWrap property to allow multiple and nested listview.
Create FriendList widget (1)
inside the folder
views and create
a file named
friendlist.dart.
Create a
stateless widget
named FriendList
with parameter
UserData.
Create FriendList widget (2)
Create FriendList widget (3)
Create FriendList widget (4)
Create FriendList widget (5)
Call the FriendList widget
Call the FriendList widget in the SocialMedia Widget.
Create PostList widget (1)
inside the folder
views and create
a file named
postslist.dart.
Create a
stateless widget
named PostsList
with parameter
UserData.
Create PostList widget (2)
Create PostList widget (2)
Create PostList widget (3)
Create PostList widget (4)
Create PostList widget (5)
Create PostList widget (6)
Create PostList widget (7)
Create PostList widget (8)
Create PostList widget (9)
Call the PostList widget (1)
Call the PostList widget in the SocialMedia Widget.
Call the PostList widget (2)
Create ProfileView widget (1)
create a file named
profileview.dart inside
the lib folder .
Create a stateless
widget named
ProfileView with
parameter UserPost.
Create ProfileView widget (2)
Create ProfileView widget (3)
Create ProfileView widget (4)
Create ProfileView widget (5)
Create ProfileView widget (6)
Create ProfileView widget (7)
Create ProfileView widget (8)
Create ProfileView widget (9)
Create ProfileView widget (10)
Create ProfileView widget (11)
Create ProfileView widget (12)
Create ProfileView widget (13)
Create ProfileView widget (14)
Create ProfileView widget (15)
Create ProfileView widget (16)
Create ProfileView widget (17)
Update the PostsList widget
update your
postslist.dart and
call the goToPage
method inside the
InkWell widget of
the build method.
Update the PostsList widget (1)
Click any posts and it must be
redirected in the ProfileView
Widget.
TASK
In the ProfileView class, convert the class into
a Stateful Widget.
Add a textfield with button that can send a
reply/comment in the comment section.
The commentbox must show after clicking the
comment icon.
Refer to the sample image.
TASK
CONGRATULATIONS!
END OF SLIDE
