I'm new to flutter. I'm displaying the cards based on the list of items. By using switch button I am trying to show only the Priority items. When switch is "ON" I need to display Only Priority items, while it's OFF I need to display the entire list of items.
I have achieved this using Switch and Visibility widget, but the position of the cards didn't change. Here is What I have done so far,
Code:
For passing the list items,
@override
Widget build(BuildContext context) {
const curveHeight = 15.0;
return new Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(dashboardTitle),
shape: const MyShapeBorder(curveHeight),
leading: Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
dashboardTitle =
(isSwitched) ? 'Priority Alerts' : 'All Alerts';
showPriority = (isSwitched) ? true : false;
});
},
activeTrackColor: Colors.red[400],
activeColor: Colors.red[600],
),
actions: <Widget>[
IconButton(
icon: Icon(IconData(0xe848, fontFamily: 'MaterialIcons')),
onPressed: () async {
await removeWorkManager();
await logout();
},
)
],
),
body: Center(
child: Container(
color: Colors.red[200],
child: CustomPaint(
painter: CurvePainter(),
child: OrientationBuilder(builder: (context, orientation) {
return FutureBuilder<List<Choice>>(
future: choices,
builder: (context, snapshot) {
if (snapshot.hasData) {
return GridView.builder(
itemCount: snapshot.data.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
orientation == Orientation.portrait
? 2
: 4,
crossAxisSpacing: 2.0,
mainAxisSpacing: 8.0,
),
itemBuilder: (BuildContext context, index) {
// print(snapshot.data[index]);
return Center(
child: SelectCard(
choice: snapshot.data[index]),
);
});
} else if (snapshot.hasError) {
print(snapshot);
return Text("Error");
}
return Text("Loading...");
},
);
})))));
Here is Card Creation class,
class _SelectCard extends State<SelectCard> {
bool loading = false;
double progress = 0;
final Choice choice;
_SelectCard(this.choice);
@override
Widget build(BuildContext context) {
final TextStyle titleStyle = TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15.0,
color: new Color(int.parse(choice.colors)));
final TextStyle alertStyle = TextStyle(
fontWeight: FontWeight.bold, fontSize: 14.0, color: Colors.black);
final TextStyle messageStyle = TextStyle(
fontWeight: FontWeight.bold, fontSize: 12.0, color: Colors.green[800]);
bool showOperator = false;
if (showPriority) {
if (choice.priority == '1') {
showOperator = false;
} else {
showOperator = true;
}
}
return Visibility(
visible: showOperator,
child: Container(
child: Card(
elevation: 20,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(color: Colors.white),
),
child: Container(
child: InkWell(
onTap: () {},
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
),
Container(
child: Column(
children: <Widget>[
Text(
choice.title,
style: titleStyle,
textAlign: TextAlign.center,
),
SizedBox(height: 5),
Text(
choice.alertName,
style: alertStyle,
textAlign: TextAlign.start,
),
SizedBox(height: 5),
Text(
choice.alertMessage,
style: messageStyle,
textAlign: TextAlign.start,
),
],
)),
]),
),
),
),
)));
}
}
I have also tried with Offstage widget, but the result was same. Sorry, I can't able post my screen shot directly because of my low reputation points.
My Full List items screen.& My Priority list item screen..
As you can see in the above pictures ,when I am displaying the priority items, it displays the card in the second position while it should be first.
Any help would be great!. Thanks in advance.