Retrieve list data using sharedPreferences in Flutter - flutter

I have Object list, my list is built with multiple types of data (Int, String, List of bool, list of String, bool...), from that list I want to save the data of some bool variables (for example when I tap a button). Is there any way to save that changed bools instead of save all the data? If the only way to save the data is saving all the list, how I can do that?
I see on internet that I have to map my list first in order to get it back later, only with map because my list is not a list of Strings, however I don't understand how to implement that, and how to get data back later, any idea ?
Example of one list I used:
import 'dart:ui';
class DefinitiveList {
int id;
String num;
String name;
bool like; //variable I want to save
bool catched; //variable I want to save
DefinitiveList(
this.id,
this.num,
this.name,
this.like,
this.catched
);
}
final List<DefinitiveList> definiti = [ //DefinitiveList is a class
DefinitiveList(
1, //id,
"88", //num
"Eli", //name
true, //like
false, //catched
),
DefinitiveList(
2, //id,
"17", //num
"Juan", //name
false, //like
false, //catched
),]
UPDATE:
here is a example list of my code:
Widget listView() {
int columnCount = 3;
final deviceWidth = MediaQuery.of(context).size.width;
return AnimationLimiter(
child: ListView.builder(
controller: myScrollController,
padding: EdgeInsets.only(
top: 10.0,
),
itemCount: definiti.length,
key: PageStorageKey<String>(
'listsave'),
itemBuilder: (context, index) {
final dlists = definiti[index];
return GestureDetector(
onTap: () {
dlists.like = !like; //I want to retrieve this
dlists.catched = !catched; //I want to retrieve this
},
child: Padding(
padding: EdgeInsets.only(
bottom: 25.0,
right: 20.0,
left: 20.0,
),
child:
Stack(alignment: Alignment.centerLeft, children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
// ignore: prefer_const_literals_to_create_immutables
boxShadow: [
shadows.BoxShadow(
blurRadius: 10,
offset: Offset(10, 10),
spreadRadius: 1,
color: Constant.isDarkMode
? Constant.greShadowDark
: Constant.greShadowLight,
)
],
color: Constant.isDarkMode
? Constant.darktMode
: Constant.lightMode,
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: deviceWidth * 0.34,
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment
.center, //Center Column contents vertically,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment
.center, //Center Row contents horizontally,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text(
dlists.name, //NOOOOOOMBRE
style: TextStyle(
fontSize: 22.0,
color: Constant.isDarkMode
? Colors.grey
: Colors.black,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment
.center, //Center Row contents horizontally,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
ZoomIn(
child: InkWell(
onTap: () {},
child: Container(
//margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
boxShadow: [
shadows.BoxShadow(
blurRadius: 7,
offset: Offset(-7, -7),
color: Constant
.isDarkMode
? Constant
.whiteShadowDark
: Constant
.whiteShadowLight,
inset: true,
spreadRadius: 1),
shadows.BoxShadow(
blurRadius: 7,
offset: Offset(7, 7),
spreadRadius: 1,
color: Constant.isDarkMode
? Constant
.greShadowDark
: Constant
.greShadowLight,
)
],
// ignore: prefer_const_literals_to_create_immutables
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.only(
topLeft:
Radius.circular(
15.0),
topRight:
Radius.circular(
15.0),
bottomRight:
Radius.circular(
15.0),
bottomLeft:
Radius.circular(
15.0))),
width: MediaQuery.of(context)
.size
.width *
0.20,
height: MediaQuery.of(context)
.size
.width *
0.080,
// ignore: prefer_const_constructors
child: Center(
child: Text(
dlists.type1,
style: GoogleFonts.rubik(
fontSize: 15,
color: Colors.white,
),
),
),
),
),
),
]),
]),
),
],
),
),
),
]),
),
);
}),
);
}

Related

How to set a custom widget as infowindow when i click on a gmap marker in flutter?

I'm a flutter beginner. What I want to do is.. when I click on a marker I placed on the map, it should show a custom widget with the latlong info and a button( to connect to save somewhere). The infowindow: doesn't accept any widgets too.
What does the ontap() function in addmarker do?
Is there any way to set a custom widget I made to be shown like the infowindow.
the add marker ftn
Future<void> addMarker(
LatLng mLatLng, String mTitle, String mDescription) async {
final Uint8List markerIcon =
await getBytesFromAsset('assets/images/icons/pin.png', 100);
setState(() {
_markers.clear();
_markers.add(Marker(
markerId:
MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
position: mLatLng,
// infoWindow: InfoWindow(
// title: mTitle,
// snippet: mDescription,
// ),
onTap: () {
//getPillInfowindow();
},
icon: BitmapDescriptor.fromBytes(
markerIcon), //BitmapDescriptor.defaultMarker,
));
});
}
the widget that i want to show
Widget getPillInfowindow() {
return AnimatedPositioned(
bottom: 100, right: 0, left: 0,
duration: Duration(milliseconds: 200),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.all(20),
height: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50)),
boxShadow: <BoxShadow>[
BoxShadow(
blurRadius: 20,
offset: Offset.zero,
color: Colors.grey.withOpacity(0.5))
]),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10),
width: 50,
height: 50,
child: ClipOval(
child: Image.asset('assets/images/icons/pin2.png',
fit: BoxFit.cover))),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('title:', //${mTitle}',
style: TextStyle(
color: Colors
.green)),
Text(
'Latitude: ', ,
style: TextStyle(fontSize: 12, color: Colors.grey)),
Text(
'Longitude:',
style: TextStyle(fontSize: 12, color: Colors.grey))
], // end of Column Widgets
), // end of Column
),
),
Padding(
padding: EdgeInsets.all(15),
child: Image.asset(
'assets/images/icons/pin2.png',
)
)
],
),
),
),
);
}

How to draw line between 1 widget to 2nd widget Flutter

I'm trying to create a comment tree but I don't have any idea how to do that. The package I found on pub.dev is not like what I want. I mesh with codes. No tutorial found related to me.
This is what I want :
I want a tutorial or idea to create design like showing in the image.
You can draw line like this
SizeBox(
height : 2,
width : MediaQuery.of(context).size.width,
child : Container(color:Colors.black)
),
try this
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(width: 2.0, color:Colors.black),//(or use VerticalDivider())
SizedBox(width: 4.0),
YourCommentWidget(),
],
))
In your tree, you can use divider() for clear line, also you can use sizedbox.
firstwidget (
child : secondwidget (child : ..............)
)
simply you can wrap second widget with a padding.
Check this package. https://pub.dev/packages/flutter_fancy_tree_view
#Pradip said in comments.
If that you want, just add in pubspec.yaml file or you want to customize like in image just Copy the code from git repository and paste in your project as separate directory.
Edit as you want.
Finally, I achieve what I want. I think is not an Optimize way. I really like to know your comment on my code. It's litter meshy but the output looks nice.
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class TestTree extends StatelessWidget {
const TestTree({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ListView(
children: [
commentTreeRoot(
context: context,
image:
'https://www.whatsappprofiledpimages.com/wp-content/uploads/2018/07/beaJKHutiful-girl-profile-p-199x300.jpg',
name: 'User Name',
subtitle: '11111 Comment Text User name Comment Text User name ',
posteDate: Text('20:18'),
content:
Text("""The :expressions will be suitable for girls, guys,\n
married people too. Because in life complications start and\n
ends with girls at the same time happiness comes to girls and only girls. Thus, even a silly waste paper will look bright when it is in the hands of beautiful girls.
The pixels are picture perfect in our website."""),
comments: [
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU,',
[
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU',
[],
margin: 40,
last: true)
]),
commentTreeChild(
context,
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT16eO5W8VPjVFrkvG8n_2FQKjByMcbLtBF4A&usqp=CAU',
last: true,
[]),
],
)
],
));
}
Widget commentTreeRoot({
required BuildContext context,
required String image,
required String name,
required String subtitle,
required Widget posteDate,
required Widget content,
required List<Widget> comments,
}) {
return Column(
children: [
CustomPaint(
painter: CreateLine(root: true),
child: Column(
// root
children: [
ListTile(
horizontalTitleGap: 0,
leading: CircleAvatar(
backgroundImage: NetworkImage(image),
),
title: Padding(
padding: const EdgeInsets.only(top: 15, left: 8),
child: Text(name),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 0, left: 8),
child: Text(
subtitle,
overflow: TextOverflow.clip,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
trailing: posteDate,
),
Container(
// Content
margin: EdgeInsets.only(left: 60),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 240, 240, 240),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: content,
),
Column(
children: comments,
),
SizedBox(
height: 10,
),
commentRootTextfield(context),
],
),
)
],
);
}
Widget commentTreeChild(
BuildContext context, String image, List<Widget> commentReply,
{bool last = false, double margin = 60}) {
return Container(
margin: EdgeInsets.only(left: margin, top: 15),
child: CustomPaint(
painter: CreateLine(root: false, last: last),
child: Column(
// child 1
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 15,
backgroundImage: NetworkImage(image),
),
Expanded(
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 240, 240, 240),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
children: [
Row(
children: [
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 8),
child: Text(
'User Name',
overflow: TextOverflow.ellipsis,
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8),
child: Text('20:18'),
)
],
),
Text(
"""The expressions will be suitable for girls, guys,
"""),
],
),
),
),
],
),
),
last ? commnetChildTextField(context) : commnetChildReplyButton(),
Column(
children: commentReply,
)
],
), // child root
),
);
}
Widget commnetChildReplyButton() {
return Container(
margin: const EdgeInsets.only(
left: 30,
),
alignment: Alignment.centerLeft,
child: SizedBox(
height: 20,
child: TextButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.zero),
),
onPressed: () {},
child: Text('Replay')),
));
}
Widget commnetChildTextField(BuildContext context) {
return FittedBox(
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 8, top: 16),
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://img.etimg.com/thumb/msid-69381991,width-650,imgsize-594328,,resizemode-4,quality-100/hacker-1.jpg'),
radius: 15,
),
SizedBox(
width: 10,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 231, 231),
border: Border.all(width: 0.5),
borderRadius: BorderRadius.all(Radius.circular(30))),
child: TextField(
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
hintText: 'Type your message...',
contentPadding:
EdgeInsets.symmetric(horizontal: 16, vertical: 8),
isDense: true,
border: InputBorder.none,
),
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
);
}
Widget commentRootTextfield(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 3, color: Color.fromARGB(255, 231, 231, 231)),
bottom:
BorderSide(width: 2, color: Color.fromARGB(255, 231, 231, 231)),
),
),
child: FittedBox(
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
IconButton(onPressed: () {}, icon: Icon(FontAwesomeIcons.smile)),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 231, 231, 231),
borderRadius: BorderRadius.all(Radius.circular(30))),
child: TextField(
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
hintText: 'Type your message...',
contentPadding:
EdgeInsets.symmetric(horizontal: 16, vertical: 8),
isDense: true,
border: InputBorder.none,
),
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
SizedBox(
width: 30,
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.attach_file,
size: 25,
))),
SizedBox(
width: 40,
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.mic,
size: 30,
)),
),
],
),
),
);
}
}
class CreateLine extends CustomPainter {
CreateLine({required this.root, this.last = false});
final bool root;
final bool last;
#override
void paint(Canvas canvas, Size size) {
final p1 = size.topLeft(root ? Offset(35, 65) : Offset(15, 40));
final p2 = root
? Offset(35, size.height - 53)
: Offset(15, size.height - (last ? 40 : 0));
final paint = Paint()
..color = Colors.black
..strokeWidth = 1;
canvas.drawLine(p1, p2, paint);
// TODO: implement paint
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
Output look like this now

Bottom container inside stack moves upwards as keyboard opens on textfeild click - Flutter

I have a stack with list of content and custom dialogBox that I created. It contains textfeild. When I click the textfeild, keyboard opens and push dialog box way above the keyboard. There is alot of gap between the bottom of the dialog and the start of the keyboard. How can I keep the bottom of dialog stuck to the top the keyboard in a clean manner.
import 'package:flutter/material.dart';
class CombinedHomeView extends StatefulWidget {
// --- Services Headings
#override
_CombinedHomeViewState createState() => _CombinedHomeViewState();
}
class _CombinedHomeViewState extends State<CombinedHomeView> {
_showGrocOrderReviewDialog(Size _deviceSize) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: double.infinity,
height: _deviceSize.height * 0.28,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"How was your last order?",
style: TextStyle(
fontFamily: fontMontserrat,
color: Colors.black87,
),
),
SizedBox(height: 10),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.2),
borderRadius: BorderRadius.all(
Radius.circular(_deviceSize.height * 0.02),
),
),
child: SingleChildScrollView(
child: TextField(
maxLines: 5,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Add additional remarks',
hintStyle: TextStyle(
fontSize: _deviceSize.height * 0.015,
fontFamily: fontMontserrat,
color: Colors.black38,
),
),
),
),
),
),
SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: SmallBtn(
passedText: "Cancel",
passedBorderColor: Colors.green,
passedBGColor: Colors.white,
passedFontColor: Colors.brown,
),
),
SizedBox(width: 10),
Expanded(child: SmallBtn(passedText: "Submit")),
],
),
],
),
),
);
}
#override
Widget build(BuildContext context) {
Size _deviceSize = MediaQuery.of(context).size;
return Stack(
alignment: Alignment.center,
children: [
// ------------ List of content
ListView( // few simple widgets here),
// ------------ Dialog
_showGrocOrderReviewDialog(_deviceSize)
],
);
}
}
You can ignore the below code. It is just a code of SmallBtn incase anyone needs it.
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class SmallBtn extends StatelessWidget {
final String passedText;
IconData passedIcon;
Color passedBGColor;
Color passedFontColor;
Color passedBorderColor;
bool isShadowEnabled;
SmallBtn({
#required this.passedText,
this.passedIcon,
this.passedBGColor,
this.passedFontColor,
this.passedBorderColor,
this.isShadowEnabled,
});
#override
Widget build(BuildContext context) {
isShadowEnabled == null
? isShadowEnabled = false
: isShadowEnabled = isShadowEnabled;
final deviceSize = MediaQuery.of(context).size;
return Container(
// alignment: Alignment.bottomLeft,
// width: deviceSize.width * 0.5 + passedText.length * 3,
padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
height: deviceSize.height * 0.04,
decoration: BoxDecoration(
color: passedBGColor == null ? Colors.brown : passedBGColor,
borderRadius: BorderRadius.all(
Radius.circular(
deviceSize.height * 0.02,
),
),
border: Border.all(
color: passedBorderColor == null
? Colors.transparent
: passedBorderColor,
),
boxShadow: [
isShadowEnabled
? BoxShadow(
color: Colors.brown,
blurRadius: 10.0, // has the effect of softening the shadow
spreadRadius: 1.0, // has the effect of extending the shadow
offset: Offset(
0.0, // horizontal
1.0, // vertical
),
)
: BoxShadow()
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
passedIcon != null
? Icon(
passedIcon,
color: Colors.white,
size: deviceSize.height * 0.02,
)
: Container(),
passedIcon != null
? SizedBox(width: deviceSize.width * 0.01)
: SizedBox(),
Text(
passedText,
style: TextStyle(
fontSize: deviceSize.height * 0.018,
fontFamily: "Montserrat",
color: passedFontColor != null ? passedFontColor : Colors.white,
),
),
],
),
);
}
}
Why are you using a stack? If you replace the stack with a column your dialog will not be pushed to the top of the screen.

Value first shows with null and after a second shows the correct value in flutter

Why the value shows with null at the first second and after the first second shows the correct value...
I have the below method which in my bloc Cubit Class:
CellsResponse cellResponse;
String mcc = "";
String mnc = "";
StatefulElement _element;
bool get mounted => _element != null;
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
CellsResponse cellsResponse;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
String platformVersion = await CellInfo.getCellInfo;
final body = json.decode(platformVersion);
cellsResponse = CellsResponse.fromJson(body);
CellType currentCellInFirstChip = cellsResponse.primaryCellList[0];
if (currentCellInFirstChip.type == "LTE") {
mcc =
"LTE mcc = " + currentCellInFirstChip.lte.network.mcc.toString();
mnc =
"LTE mnc = " + currentCellInFirstChip.lte.network.mnc.toString();
} else if (currentCellInFirstChip.type == "NR") {
mcc =
"NR mcc = " + currentCellInFirstChip.nr.network.mcc.toString();
mnc =
"LTE mnc = " + currentCellInFirstChip.nr.network.mnc.toString();
} else if (currentCellInFirstChip.type == "WCDMA") {
mcc = "WCDMA mcc = " +
currentCellInFirstChip.wcdma.network.mcc.toString();
mnc =
"LTE mnc = " + currentCellInFirstChip.wcdma.network.mnc.toString();
} else if (currentCellInFirstChip.type == "GSM") {
mcc = currentCellInFirstChip.gsm.network.mcc.toString();
mnc =
"LTE mnc = " + currentCellInFirstChip.gsm.network.mnc.toString();
// print('currentMCC = ' + mcc);
// print('currentCqi = ' + mnc);
}
} on PlatformException {
cellResponse = null;
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
cellResponse = cellsResponse;
emit(AppSetCellResponseState());
}
as I call the value in the below class stateless widget:
DataCell(
CustomText(
padding: EdgeInsets.only(top: 6),
text: cubit.mcc,
color: goldDefaultColor,
),
),
So while I am trying to get the value in the build widget:
print('currentMCC is = ' + AppCubit.get(context).mcc);
it shows the value with null and after a second shows the correct value as the below in log:
I/flutter (23753): currentMCC is =
I/flutter (23753): currentMCC is = 602
and this is the below full Screen class:
import 'package:airforce/shared/cubit/app_cubit.dart';
import 'package:airforce/shared/cubit/app_states.dart';
import 'package:airforce/shared/widgets/serving_cell_widget/gsm/servingCellTable.dart';
import 'package:flutter/material.dart';
import 'package:airforce/shared/widgets/custom_text.dart';
import 'package:airforce/shared/styles/colors.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class SlotScreen extends StatelessWidget{
#override
Widget build(BuildContext context) {
print('currentMCC is = ' + AppCubit.get(context).mcc);
return BlocConsumer<AppCubit, AppStates>(
listener: (context, state) {},
builder: (context, state) {
var cubit = AppCubit.get(context);
return Container(
child: Container(
color: Colors.black.withOpacity(.4),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
controller: cubit.scrollController,
child: Column(
children: [
SizedBox(
height: 100,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
padding: EdgeInsets.all(15),
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFA2A2A2)),
borderRadius: BorderRadius.vertical(
top: Radius.circular(20.0),
bottom: Radius.circular(5.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CustomText(
text: 'Sim information',
fontWeight: FontWeight.bold,
),
LayoutBuilder(
builder: (context, constraints) => Row(
children: [
Container(
child: Image.asset(
'assets/images/vodafone-logo.png',
),
width: constraints.maxWidth * 0.25,
),
Expanded(
child: DataTable(
headingRowHeight: 20,
columnSpacing: 40,
dataRowHeight: 20,
columns: [
DataColumn(
label: CustomText(
padding: EdgeInsets.only(top: 3),
text: 'OPERATOR',
)),
DataColumn(
label: Row(
children: <Widget>[
CustomText(
padding:
EdgeInsets.only(top: 3),
text: 'vodafone',
color: goldDefaultColor,
),
],
),
),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
CustomText(
text: 'MCC',
padding:
EdgeInsets.only(top: 6),
),
],
)),
DataCell(
CustomText(
padding: EdgeInsets.only(top: 6),
text: cubit.mcc,
color: goldDefaultColor,
),
),
]),
DataRow(cells: [
DataCell(CustomText(
padding: EdgeInsets.only(top: 6),
text: 'MNC',
)),
DataCell(CustomText(
padding: EdgeInsets.only(top: 6),
text: '02',
color: goldDefaultColor,
)),
]),
],
),
),
],
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
padding: EdgeInsets.all(15),
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFA2A2A2)),
borderRadius: BorderRadius.vertical(
top: Radius.circular(20.0),
bottom: Radius.circular(5.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CustomText(
text: 'Sim information',
fontWeight: FontWeight.bold,
),
DataTable(
headingRowHeight: 20,
columnSpacing: 40,
dataRowHeight: 20,
columns: [
DataColumn(
label: CustomText(
padding: EdgeInsets.only(top: 6),
text: 'Sim operator',
)),
DataColumn(
label: Row(
children: <Widget>[
CustomText(
padding: EdgeInsets.only(top: 6),
text: 'sim info',
color: goldDefaultColor,
),
],
),
),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
CustomText(
text: 'ICCID',
padding: EdgeInsets.only(top: 6),
),
],
)),
DataCell(
CustomText(
text: 'iccid',
color: goldDefaultColor,
padding: EdgeInsets.only(top: 6),
)),
]),
DataRow(cells: [
DataCell(
CustomText(
text: 'IMEI',
padding: EdgeInsets.only(top: 6),
),
),
DataCell(CustomText(
text: '123456789',
color: goldDefaultColor,
padding: EdgeInsets.only(top: 6),
)),
]),
DataRow(cells: [
DataCell(CustomText(
text: 'SIM IMSI',
padding: EdgeInsets.only(top: 6),
)),
DataCell(CustomText(
padding: EdgeInsets.only(top: 6),
text: '123456789',
color: goldDefaultColor,
)),
]),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFA2A2A2)),
borderRadius: BorderRadius.vertical(
top: Radius.circular(15.0),
bottom: Radius.circular(5.0)),
),
child: GSMServingCellTable(),
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFA2A2A2)),
borderRadius: BorderRadius.vertical(
top: Radius.circular(15.0),
bottom: Radius.circular(5.0)),
),
child: GSMServingCellTable(),
),
),
],
),
),
),
);
});
}
}
it reads in the bloc cubit class fine, but when I am trying to call it in the screen I found this problem....

How can I change a container color on tap with Provider?

I am trying to create a custom style checkbox that is a container with rounded edges. It should show a different color icon when tapped. I am not sure how to do this can anyone help? Here is the code: (Edit I updated the code to show the gridview builder that the checkbox is placed in. The gridviewbuilder builds a card based on the length of a list in the provider class. I am trying to get the checkbox to work independently of the other gridview cards.
//this is the function in the provider class
toggleCheckbox(bool checkboxStatus){
if (checkboxStatus = false){
return checkboxStatus = true;
} else if (checkboxStatus = true){
return checkboxStatus = false;
}
notifyListeners();
}
GridView.builder(
itemCount: bloc.readingList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 12/16, crossAxisCount: 2, crossAxisSpacing: 20.0, mainAxisSpacing: 20),
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(3.0, 6.0),
blurRadius: 10.0)
],
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage('${bloc.readingList[index].storyImage}'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 8.0, bottom: 0.0, left: 0.0, right: 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
TopicTag(index: index,),
CardContents(),
],
),
),
),
);
},
),
class CardContents extends StatefulWidget {
const CardContents({
Key key,
}) : super(key: key);
#override
_CardContentsState createState() => _CardContentsState();
}
class _CardContentsState extends State<CardContents> {
bool checkboxStatus = false;
#override
Widget build(BuildContext context) {
final bloc = Provider.of<ReadingListBloc>(context);
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
color: Colors.blueGrey.withOpacity(.5),
child: Column(
children: <Widget>[
Text('Title Here (color change with topic)',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: "Calibre-Semibold",
letterSpacing: 1.0,
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0, bottom: 8),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white),
child: GestureDetector(
onTap:(){},
// bloc.toggleCheckbox(checkboxStatus),
child: checkboxStatus
? Icon(Icons.check_circle, color: Colors.green)
: Icon(Icons.check_circle, color: Colors.white)),
),
),
],
),
],
),
),
),
);
}
}
Considering that you have setup your provider correctly, you could do something like below.
// add the property below to your provider
bool checkboxStatus = false;
void toggleCheckbox(){
checkboxStatus = !checkboxStatus;
notifyListeners();
}
Now for the listeners, you can just check this new property, considering that bloc is your provider.
GestureDetector(
onTap: () {
bloc.toggleCheckbox(checkboxStatus);
},
child: bloc.checkboxStatus ? Icon(Icons.check_box, color: Colors.green)
: Icon(Icons.check_circle, color: Colors.white)),
I'm assuming that for some reason you want to use a provider. Of course you could also use a StatefulWidget if you only need the status in this widget.