Refresh part of screen in flutter - flutter

Question

EDIT - Complete Code. I added SetState and it didnt refresh.
class ForumPost extends StatefulWidget {
#override
_ForumPostState createState() => new _ForumPostState();
final User user;
final String postID;
final Features features;
ForumPost({Key key, #required this.user, #required this.postID, #required this.features}) : super(key: key);
}
class _ForumPostState extends State<ForumPost> {
List<TabItem> navItems = <TabItem>[
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.help_outline, title: 'Support'),
TabItem(icon: Icons.people, title: 'Contacts'),
TabItem(icon: Icons.chat_bubble, title: 'Forum')
];
List data;
Future<String> getPostsByCategory() async {
var response = await http.post(
Uri.encodeFull("http://url/api/ForumPostByPostID"),
headers: {"Content-Type": "application/json",
'Accept': 'application/json',},
body: json.encode({'PostID' : widget.postID }));
this.setState(() {
data = json.decode(response.body);
}
);
return "Success!";
}
#override void initState() {
this.getPostsByCategory();
}
#override
Widget build(BuildContext context) {
Future forumUpVote(String userid, String postID) async {
final response =
await http.post('http://url/api/ForumUpvote',
headers: {"Content-Type": "application/json",
'Accept': 'application/json',},
body: json.encode({'userid' : userid , 'postID' : widget.postID}));
if (response.statusCode == 204) {
// Call was successful
// Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPost(user: widget.user, postID: widget.postID, features: widget.features)));
setState(() {
});
}
}
return new Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,
centerTitle: true,
actions: <Widget>[
new IconButton( icon: new Icon(
FontAwesomeIcons.plusCircle,),
tooltip: 'Ask Question',
onPressed: (){
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumAskQuestion( user: widget.user, features: widget.features)));
}
),
new IconButton( icon: new Icon(
FontAwesomeIcons.search,),
tooltip: 'Search Community',
onPressed: (){
print('pressed');
}
)
]
),
bottomNavigationBar: ConvexAppBar.builder(
user: widget.user,
features: widget.features,
count: navItems.length,
backgroundColor: Colors.grey[700],
tabBuilder: (BuildContext context, int index, bool active) {
var navigationItem = navItems[index];
var _color = active ? Colors.white : Colors.white60;
var _icon = active
? navigationItem.activeIcon ?? navigationItem.icon
: navigationItem.icon;
return Container(
color: Colors.transparent,
padding: EdgeInsets.only(bottom: 2),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(_icon, color: _color),
Text(navigationItem.title, style: TextStyle(color: _color, fontSize: 12.0))
],
),
);
},
actionBuilder: (BuildContext context, int index, bool active) {
var _color = active ? Colors.white : Colors.white60;
return Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 60,
height: 60,
child: Container(
decoration:
BoxDecoration(shape: BoxShape.circle, color: _color),
child: Icon(
Icons.chat_bubble,
size: 40,
color: Colors.red[200],
),
),
)
],
);
},
),
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Colors.white, Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index){
return new Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.beenhere, color: Colors.red, size: 35.0,),
title: new Text(data[index]["Title"],style: new TextStyle(fontSize: 20.0, color: Colors.grey) ),
subtitle: new Text(data[index]["Content"],style: new TextStyle(fontSize: 15.0, color: Colors.grey)),
trailing: new Text(data[index]["FirstName"],style: new TextStyle(fontSize: 15.0, color: Colors.grey)),
isThreeLine: true,
),
ButtonTheme.bar( // make buttons use the appropriate styles for cards
child: ButtonBar(
children: <Widget>[
FlatButton(
padding: EdgeInsets.all(10.0),
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.thumb_up, color: Colors.grey[600]),
Text(data[index]["UpVote"].toString(), style: new TextStyle(color: Colors.grey))
],
),
onPressed: () {
forumUpVote(widget.user.userId, widget.postID);
},
),
FlatButton(
padding: EdgeInsets.all(10.0),
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.question_answer, color: Colors.blue),
Text("Answer", style: new TextStyle(color: Colors.grey))
],
),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumAnswerQuestion( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], features: widget.features )));
},
),
FlatButton(
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.info_outline, color: Colors.orangeAccent),
Text(data[index]["AnswerCount"].toString(), style: new TextStyle(color: Colors.grey))
],
),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPostsDetail( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], content: data[index]["Content"], features: widget.features )));
},
),
FlatButton(
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.flag, color: Colors.red),
Text("Flag", style: new TextStyle(color: Colors.red))
],
),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPostsDetail( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], content: data[index]["Content"], features: widget.features )));
},
),
],
),
),
]
),
);
},
)
)
);
}
}
We have a forum written in flutter and an upvote post function that calls a web api via http. We need the icon with the count of upvotes to refresh but not the entire screen. How is this done in flutter? We used to achieve this via AJAX in web pages.
Here is the code for the upvote icon
children: <Widget>[
Icon(Icons.thumb_up, color: Colors.green),
Text(data[index]["UpVote"].toString(), style: new TextStyle(color: Colors.grey))
],
Code for HTTP Call
Future forumUpVote(String userid, String postID) async {
final response =
await http.post('http://url/api/ForumUpvote',
headers: {"Content-Type": "application/json",
'Accept': 'application/json',},
body: json.encode({'userid' : userid , 'postID' : widget.postID}));
if (response.statusCode == 204) {
// Call was successful
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPost(user: widget.user, postID: widget.postID, features: widget.features)));
}
}
When the response is successful it sends them back to the same screen which is why the entire screen refreshes. So Im guessing that we need to setstate() or something along those lines. Im not sure how to fix this.

Answer 1

Can you create a separate stateful widget that is referenced in your current widget which has the upvote button along with the upvote counter?
Then when it is pressed you only call the setState() method within that child widget. This will only refresh that widget and not the whole page.

Answer 2

In below code I made two widgets. The first (called "mainWidget") is the one that you do not want to refresh and it references the second widget (called "refreshingWidget"). They both hold state but only the refreshing widget is updated when you call setState().
class mainWidget extends StatefulWidget {
#override
_mainWidgetState createState() => _mainWidgetState();
}
class _mainWidgetState extends State<mainWidget> {
#override
Widget build(BuildContext context) {
print("Main widget is refreshing");
return new refreshingWidget();
}
}
class refreshingWidget extends StatefulWidget {
#override
_refreshingWidgetState createState() => _refreshingWidgetState();
}
class _refreshingWidgetState extends State<refreshingWidget> {
#override
Widget build(BuildContext context) {
print("Refreshing widget is refreshing.");
return RaisedButton(
onPressed: () {
setState(() {});
},
child: Text("Press to refresh this widget"));
}
}