Develop Reference

Why the color of status bar not changing even after applying AnnotatedRegion<SystemUiOverlayStyle> in flutter

I am trying to make the color of the status bar look white. I have tried to use AnnotatedRegion<SystemUiOverlayStyle> with value: SystemUiOverlayStyle.light, but this is not doing anything the app remains as it was before.
Below I have attached the code of my home.dart for which I want the status bar color to be white and I have attached the code of main.dart. One to mention here is that I am not using any appbar. I have attached the screenshot of my current page.
main.dart
import 'package:Healthwise/pages/listPage.dart';
import 'package:Healthwise/pages/resultPage.dart';
import 'package:camera/camera.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:Healthwise/pages/home.dart';
import 'package:flutter/services.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
List<CameraDescription>? cameras;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
cameras = await availableCameras();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// We have removed the appbar
// appBarTheme: const AppBarTheme(
// systemOverlayStyle: SystemUiOverlayStyle(
// statusBarColor: Colors.white,
// statusBarBrightness: Brightness.light),
// ),
scaffoldBackgroundColor: Colors.white,
textSelectionTheme: const TextSelectionThemeData(
cursorColor: Color.fromARGB(255, 253, 126, 153),
selectionColor: Color.fromARGB(255, 253, 126, 153),
selectionHandleColor: Color.fromARGB(255, 253, 126, 153),
),
),
home: Home());
}
}
home.dart
import 'package:Healthwise/pages/listPage.dart';
import 'package:Healthwise/pages/resultPage.dart';
import 'package:Healthwise/helpers/user.dart';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:Healthwise/main.dart';
import 'package:flutter/services.dart';
import 'package:tflite/tflite.dart';
import '../helpers/frontEnd.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool isWorking = false;
String result = '';
CameraController? cameraController;
CameraImage? imgCamera;
initCamera() {
cameraController = CameraController(cameras![0], ResolutionPreset.max);
cameraController!.initialize().then((value) {
if (!mounted) {
print("Camera Not Mounted");
return;
} else {
setState(() {
cameraController!.startImageStream((imageFromStream) {
if (!isWorking) {
isWorking = true;
imgCamera = imageFromStream;
runModelOnStreamFrames();
}
});
});
}
});
}
loadModel() async {
await Tflite.loadModel(
model: 'assets/model_unquant.tflite',
labels: 'assets/labels.txt',
);
}
#override
void initState() {
super.initState();
loadModel();
}
#override
void dispose() async {
// TODO: implement dispose
super.dispose();
await Tflite.close();
await cameraController?.dispose();
}
runModelOnStreamFrames() async {
var racognitions = await Tflite.runModelOnFrame(
bytesList: imgCamera!.planes.map((plane) {
return plane.bytes;
}).toList(),
imageHeight: imgCamera!.height,
imageWidth: imgCamera!.width,
imageMean: 127.5,
imageStd: 127.5,
rotation: 90,
numResults: 1,
threshold: 0.1,
asynch: true,
);
racognitions!.forEach((response) {
var res = response['confidence'] as double;
if (res > 0.95) {
result = response['label'];
// +
// ' ' +
// (response['confidence'] as double).toStringAsFixed(2);
}
});
if (mounted) {
setState(() {
result;
});
}
isWorking = false;
}
#override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Scaffold(
resizeToAvoidBottomInset: false,
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: imgCamera == null
? CameraOpeningButton()
: CloseCameraAndSearch(cameraController),
// appBar:
// AppBar(backgroundColor: primary_color, title: application_name),
body: SafeArea(
child: Stack(children: [
Container(
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/SVG/MainBackground.png"),
fit: BoxFit.fill),
),
),
Container(
// height: 560,
child: Container(
height: 650,
width: 360,
child: imgCamera == null
? Column(
children: [
const SizedBox(
height: 20,
),
SearchBar(),
const SizedBox(
height: 20,
),
Center(
child: Container(
height: 500,
width: 340,
decoration: const BoxDecoration(
color: Color(0xFFffffff),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0, // soften the shadow
spreadRadius: 2.0, //extend the shadow
)
],
),
child: Column(
children: [
Container(
height: 50,
width: double.infinity,
color: Color.fromARGB(255, 253, 126, 153),
child: Center(
child: Text(
"Banana",
style: TextStyle(
color: Color.fromARGB(
255, 255, 255, 255),
fontSize: 25,
),
),
),
),
Container(
child: Column(
children: [
Image.network(
'https://images.everydayhealth.com/images/diet-nutrition/all-about-bananas-nutrition-facts-health-benefits-recipes-and-more-rm-722x406.jpg?w=1110'),
Container(
margin: EdgeInsets.symmetric(
vertical: 30, horizontal: 30),
child: Text(
'"If you feel recurrent soreness of muscles after a workout, you may lack magnesium in your body. A magnesium-rich banana may help with muscle contraction and relaxation that increase lean muscle mass."',
style: TextStyle(
color: Color.fromARGB(
255, 80, 80, 80),
fontSize: 20,
),
),
)
],
),
)
],
),
)),
const SizedBox(
height: 20,
),
],
)
: AspectRatio(
aspectRatio: cameraController!.value.aspectRatio,
child: CameraPreview(cameraController!),
)),
),
]),
)
// body: Container(
// decoration: BoxDecoration(),
// child: Column(children: [
// Stack(
// children: [
// Center(
// child: Container(
// margin: EdgeInsets.only(top: 100.0),
// height: 220,
// width: 320,
// child: Container(),
// ),
// ),
// Center(
// child: TextButton(
// onPressed: () {
// initCamera();
// },
// child: Container(
// margin: EdgeInsets.only(top: 5),
// height: 550,
// width: 360,
// child: imgCamera == null
// ? Container(
// height: 550,
// width: 360,
// child: Icon(
// Icons.photo_camera_front,
// color: Colors.pink,
// size: 60,
// ),
// )
// : AspectRatio(
// aspectRatio:
// cameraController!.value.aspectRatio,
// child: CameraPreview(cameraController!),
// )),
// ),
// )
// ],
// ),
// Center(
// child: Container(
// color: primary_color,
// margin: EdgeInsets.only(top: 10.0),
// child: SingleChildScrollView(
// // controller: controller,
// child: Text(
// result,
// style: const TextStyle(
// backgroundColor: Colors.black87,
// fontSize: 10.0,
// color: Colors.white),
// textAlign: TextAlign.center,
// )),
// ),
// ),
// ElevatedButton(
// onPressed: () async {
// if (result != '') {
// await cameraController?.stopImageStream();
// await cameraController?.pausePreview();
// itemName = result.toString();
// print("--------------------------------------------");
// print(itemName);
// Navigator.of(context).pushReplacement(
// MaterialPageRoute(builder: (context) => ResultPage()));
// }
// },
// child: Container(
// child: Text("Next"),
// color: Colors.blue,
// ))
// ]),
// ),
),
);
}
Row CloseCameraAndSearch(CameraController? cameraController) =>
Row(children: [
//Camera Close
TextButton(
style: TextButton.styleFrom(foregroundColor: Colors.pink),
onPressed: () async {
await cameraController?.stopImageStream();
await cameraController?.pausePreview();
imgCamera = null;
setState(() {});
},
child: Image(
image: AssetImage('assets/SVG/CloseCamera.png'),
height: 60,
width: 60,
),
),
//Result
Spacer(),
Container(
color: primary_color,
child: SingleChildScrollView(
// controller: controller,
child: Text(
result,
style: const TextStyle(
backgroundColor: Colors.black87,
fontSize: 10.0,
color: Colors.white),
textAlign: TextAlign.center,
)),
),
//Camera Close Next Page
Spacer(),
TextButton(
style: TextButton.styleFrom(foregroundColor: Colors.pink),
onPressed: () async {
if (result != '') {
await cameraController?.stopImageStream();
await cameraController?.pausePreview();
itemName = result.toString();
print(itemName);
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => ResultPage()));
}
},
child: Image(
image: AssetImage('assets/SVG/SearchFruitButton.png'),
height: 60,
width: 60,
),
)
]);
// Camera Open
TextButton CameraOpeningButton() {
return TextButton(
style: TextButton.styleFrom(foregroundColor: Colors.pink),
onPressed: () {
initCamera();
},
child: Image(
image: AssetImage('assets/SVG/CameraButton.png'),
height: 60,
width: 60,
),
);
}
//SearchBar
Container SearchBar() {
return Container(
height: 50,
width: 340,
padding: EdgeInsets.fromLTRB(20, 0, 10, 0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
//
color: Color.fromARGB(255, 255, 255, 255),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0, // soften the shadow
spreadRadius: 2.0, //extend the shadow
)
],
),
child: Row(
children: [
Container(
height: 40,
width: 240,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'Search Pomegranate'),
),
),
Spacer(),
TextButton(
style: ButtonStyle(alignment: AlignmentDirectional.centerEnd),
onPressed: () => {result},
child: Icon(
Icons.search,
color: Color.fromARGB(255, 253, 126, 153),
),
)
],
),
);
}
}

Wrap your Scaffold with SafeArea and give color to the status bar as below code
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.white),
child: SafeArea(
child: Scaffold(

Hello, I just recently started working with flutter and I have an error when I create a second class, it just doesn't show up in the project itse

I have a form consisting of nextformfield and elevatedButton. I want to repeat the same form just below on the screen in the same page. I have never tried to do this and it didn't work out, please help.
Here is my code in which I want to do this:
import 'dart:math';
import 'package:flutter/material.dart';
class gradysu extends StatefulWidget {
const gradysu({super.key});
#override
State<gradysu> createState() => _gradysuState();
}
class _gradysuState extends State<gradysu> {
var _formKey = GlobalKey<FormState>();
var x, y, c, d;
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Квадрат'),
backgroundColor: Color.fromARGB(255, 252, 252, 252),
automaticallyImplyLeading: true,
),
body: SingleChildScrollView(
child: Container(
height: 800,
width: 639,
/* decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image/fon2.png"),
fit: BoxFit.cover,
),
),*/
child: Column(
children: [
Container(
color: Colors.brown,
height: 50.0,
width: 1000.0,
child: Center(
child: const Text(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white),
'Расчёт площади квадрата S=:'))),
Row(children: <Widget>[
Container(
padding: const EdgeInsets.all(10.0),
child: const Text('Введите градусы:',
style: TextStyle(color: Color.fromARGB(255, 0, 0, 0))),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(10.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) return 'Задайте градусы';
try {
x = double.parse(value);
} catch (h) {
x;
return h.toString();
}
}))),
]),
const SizedBox(height: 20.0),
Text(
y == null ? '' : ' $y (рад) ',
style: const TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 0, 0, 0)),
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
setState(() {
if (x is double) y = ((x * pi) / 180);
});
}
},
style: ElevatedButton.styleFrom(
foregroundColor: Color.fromARGB(255, 235, 235,
235), //change background color of button
backgroundColor:
Colors.brown, //change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5.0,
),
child: const Padding(
padding: EdgeInsets.all(8),
child: Text(
'Вычислить',
style: TextStyle(fontSize: 20),
))),
SizedBox(height: 10.0),
],
),
),
),
),
);
}
}
class gradysu1 extends StatefulWidget {
const gradysu1({super.key});
#override
State<gradysu1> createState() => _gradysu1State();
}
class _gradysu1State extends State<gradysu1> {
var _formKey1 = GlobalKey<FormState>();
var a, c;
#override
Widget build(BuildContext context) {
return Form(
key: _formKey1,
child: Scaffold(
body: SafeArea(
child: Column(children: [
Row(children: <Widget>[
Container(
padding: const EdgeInsets.all(10.0),
child: const Text('Введите градусы:',
style: TextStyle(color: Color.fromARGB(255, 0, 0, 0))),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(10.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) return 'Задайте градусы';
try {
a = double.parse(value);
} catch (h) {
a;
return h.toString();
}
}))),
]),
const SizedBox(height: 20.0),
Text(
a == null ? '' : ' $a (рад) ',
style: const TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 0, 0, 0)),
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () {
if (_formKey1.currentState!.validate()) {
setState(() {
if (c is double) a = ((c * pi) / 180);
});
}
},
style: ElevatedButton.styleFrom(
foregroundColor: Color.fromARGB(
255, 235, 235, 235), //change background color of button
backgroundColor: Colors.brown, //change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5.0,
),
child: const Padding(
padding: EdgeInsets.all(8),
child: Text(
'Вычислить',
style: TextStyle(fontSize: 20),
))),
]))));
}
}
This is what it looks like
And this is how it should look like
I tried to create another class, but flutter just doesn't see it, I tried to add it to the main code, but then he just didn't count, but threw an exception.

Try to create reusable widget or builder method to minimize the snippet/code-dublication.
import 'dart:math';
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MaterialApp(
home: gradysu(),
));
}
class gradysu extends StatefulWidget {
const gradysu({super.key});
#override
State<gradysu> createState() => _gradysuState();
}
class _gradysuState extends State<gradysu> {
var _formKey = GlobalKey<FormState>();
var x, y, c, d;
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Квадрат'),
backgroundColor: Color.fromARGB(255, 252, 252, 252),
automaticallyImplyLeading: true,
),
body: SingleChildScrollView(
child: Container(
height: 800,
width: 639,
/* decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image/fon2.png"),
fit: BoxFit.cover,
),
),*/
child: Column(
children: [
Container(
color: Colors.brown,
child: Center(
child: const Text(
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white),
'Расчёт площади квадрата S=:'))),
Row(children: <Widget>[
Container(
padding: const EdgeInsets.all(10.0),
child: const Text('Введите градусы:',
style: TextStyle(color: Color.fromARGB(255, 0, 0, 0))),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(10.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) return 'Задайте градусы';
try {
x = double.parse(value);
} catch (h) {
x;
return h.toString();
}
},
),
),
),
]),
const SizedBox(height: 20.0),
Text(
y == null ? '' : ' $y (рад) ',
style: const TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 0, 0, 0)),
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
setState(() {
if (x is double) y = ((x * pi) / 180);
});
}
},
style: ElevatedButton.styleFrom(
foregroundColor: Color.fromARGB(
255, 235, 235, 235), //change background color of button
backgroundColor: Colors.brown, //change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5.0,
),
child: const Padding(
padding: EdgeInsets.all(8),
child: Text(
'Вычислить',
style: TextStyle(fontSize: 20),
),
),
),
SizedBox(height: 10.0),
/// second item , you can create a build method for this
Row(children: <Widget>[
Container(
padding: const EdgeInsets.all(10.0),
child: const Text('Введите градусы:',
style: TextStyle(color: Color.fromARGB(255, 0, 0, 0))),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(10.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) return 'Задайте градусы';
try {
x = double.parse(value);
} catch (h) {
x;
return h.toString();
}
},
),
),
),
]),
const SizedBox(height: 20.0),
Text(
y == null ? '' : ' $y (рад) ',
style: const TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 0, 0, 0)),
),
const SizedBox(height: 20.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
setState(() {
if (x is double) y = ((x * pi) / 180);
});
}
},
style: ElevatedButton.styleFrom(
foregroundColor: Color.fromARGB(
255, 235, 235, 235), //change background color of button
backgroundColor: Colors.brown, //change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5.0,
),
child: const Padding(
padding: EdgeInsets.all(8),
child: Text(
'Вычислить',
style: TextStyle(fontSize: 20),
),
),
),
SizedBox(height: 10.0),
],
),
),
),
),
);
}
}

How to show list of images in grid view builder if list is not empty

i have a list which contains list of images, i want to show these in my grid view builder if list if not empty other wise i just want to show static + symbol in my grid view builder.
it is my list
var otherPersonOfferList = <Inventory>[].obs;
and this is my grid view builder which i have extracted as a widget and using it in my screen
import 'package:bartermade/models/Get_Inventory.dart';
import 'package:bartermade/models/inventory.dart';
import 'package:bartermade/widgets/inventoryTile.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/inventoryController.dart';
class OfferGrid extends StatefulWidget {
OfferGrid(
{Key? key,
required this.list,
required this.modelSheetHeading,
required this.gestureState})
: super(key: key);
String modelSheetHeading;
List<Inventory> list;
bool gestureState;
#override
State<OfferGrid> createState() => _OfferGridState();
}
class _OfferGridState extends State<OfferGrid> {
InventoryController inventoryController = Get.find();
bool isDeleting = false;
#override
Widget build(BuildContext context) {
if (widget.gestureState == true
? (inventoryController.otherPersonOfferList == [] ||
inventoryController.otherPersonOfferList.length == 0 ||
inventoryController.otherPersonOfferList.isEmpty)
: (inventoryController.myOfferList == [] ||
inventoryController.myOfferList.length == 0 ||
inventoryController.myOfferList.isEmpty)) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
context: context,
builder: (context) {
return InventoryTile(
modelSheetHeading: widget.modelSheetHeading,
list: widget.gestureState == true
? inventoryController.traderInventoryList
: inventoryController.myInventoryList1,
inventoryController: inventoryController,
gestureState: widget.gestureState);
});
},
child: Container(
height: 90,
width: 90,
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: Icon(
Icons.add,
size: 35,
),
),
),
);
} else {
return GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.list.length + 1,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (context, index) {
if (index == widget.list.length) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
context: context,
builder: (context) {
return InventoryTile(
modelSheetHeading: widget.modelSheetHeading,
list: widget.gestureState == true
? inventoryController.traderInventoryList
: inventoryController.myInventoryList1,
inventoryController: inventoryController,
gestureState: widget.gestureState);
});
},
child: Container(
height: 30,
width: 30,
decoration:
BoxDecoration(border: Border.all(color: Colors.black)),
child: Icon(
Icons.add,
size: 35,
),
),
),
);
} else {
return Stack(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onLongPress: () {
setState(() {
isDeleting = true;
});
},
onTap : (){
setState(() {
isDeleting = false;
});
},
child: CachedNetworkImage(
fit: BoxFit.cover,
height: 100,
width: 200,
imageUrl: // "https://asia-exstatic-vivofs.vivo.com/PSee2l50xoirPK7y/1642733614422/0ae79529ef33f2b3eb7602f89c1472b3.jpg"
"${widget.list[index].url}",
placeholder: (context, url) => Center(
child: CircularProgressIndicator(
color: Colors.grey,
),
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
),
isDeleting == true
? Positioned(
right: 0,
top: 0,
child: CircleAvatar(
backgroundColor: Colors.red,
radius: 10,
child: Icon(
Icons.remove,
size: 14,
),
),
)
: SizedBox()
],
);
}
});
}
}
}
and this is my screen where is just want to check if my list is non empty then fill my grid view with images otherwise just show + sign in grid view
import 'package:bartermade/controllers/inventoryController.dart';
import 'package:bartermade/models/Get_Inventory.dart';
import 'package:bartermade/models/inventory.dart';
import 'package:bartermade/screens/chat/chatScreen.dart';
import 'package:bartermade/utils/app_colors.dart';
import 'package:bartermade/widgets/snackBar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import '../../../../services/inventoryService.dart';
import '../../../../widgets/offerGrid.dart';
class OfferTradeScreen extends StatefulWidget {
String postUserId;
String postUserName;
OfferTradeScreen({
Key? key,
required this.postUserId,
required this.postUserName,
}) : super(key: key);
#override
State<OfferTradeScreen> createState() => _OfferTradeScreenState();
}
class _OfferTradeScreenState extends State<OfferTradeScreen> {
// TradeController tradeController = Get.put(TradeController());
InventoryController inventoryController = Get.put(InventoryController());
// GiftStorageService giftStorageService = GiftStorageService();
// GiftController giftController = Get.put(GiftController());
// ProfileController profileController = Get.put(ProfileController());
// TradeStorageService tradeStorageService = TradeStorageService();
// TradingService tradingService = TradingService();
// PreferenceService preferenceService = PreferenceService();
late List<Inventory> otherPersonList;
late List<Inventory> myList;
#override
void initState() {
super.initState();
inventoryController.getOtherUserInventory(widget.postUserId);
otherPersonList = inventoryController.otherPersonOfferList;
myList = inventoryController.myOfferList;
}
otherPersonlistener() {
inventoryController.otherPersonOfferList.listen((p0) {
if (this.mounted) {
setState(() {
otherPersonList = p0;
});
}
});
}
mylistener() {
inventoryController.myOfferList.listen((p0) {
if (this.mounted) {
setState(() {
myList = p0;
});
}
});
}
int draggableIndex = 0;
#override
Widget build(BuildContext context) {
print("-------building------");
otherPersonlistener();
mylistener();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
leading: GestureDetector(
onTap: () {
inventoryController.myOfferList.clear();
inventoryController.otherPersonOfferList.clear();
Get.back();
},
child: Icon(Icons.arrow_back)),
title: Text(
"Offer",
style: TextStyle(color: Colors.white),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: GestureDetector(
onTap: () {
Get.to(() => ChatScreen(
currentUserId: widget.postUserId,
recieverId: inventoryController.userId.toString()));
},
child: Icon(Icons.message)),
)
],
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 10,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text(
"${widget.postUserName} Inventory",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w400),
),
),
OfferGrid(
gestureState: true,
list: otherPersonList,
modelSheetHeading: "${widget.postUserName}",
)
],
),
),
),
Expanded(
flex: 1,
child: Divider(
thickness: 2,
color: Colors.black,
height: 3,
),
),
Expanded(
flex: 10,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"My Inventory",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w400),
),
OfferGrid(
gestureState: false,
list: myList,
modelSheetHeading: "My Inventory",
)
],
),
),
),
Center(child: Obx(() {
return inventoryController.makingOffer.value == true
? CircularProgressIndicator(
color: AppColors.pinkAppBar,
)
: ElevatedButton(
onPressed: () {
if (inventoryController.otherPersonOfferList.isEmpty &&
inventoryController.myOfferList.isEmpty) {
showSnackBar(
"Please add both inventories to make offer",
context);
} else {
inventoryController.postOffer(
widget.postUserId, context);
}
},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 50)),
child: Text("Send Offer"));
}))
],
),
),
);
}
#override
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
}

User following code :
GridView.builder(
shrinkWrap: true,
itemCount: data.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 17,
mainAxisSpacing: 17,
),
itemBuilder: (
context,
index,
) {
return Obx(
() => InkWell(
onTap: () {
},
child: ClipRRect(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: ColorConfig.colorDarkBlue, width: 2),
image: DecorationImage(
image: AssetImage(ImagePath.unselectedContainer), ///imageURL
fit: BoxFit.fill,
)),
child: Center(
child: Text(data[index].heading,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: ThemeConstants.textThemeFontSize18,
fontWeight: FontWeight.w700,
color: ColorConfig.colorDarkBlue)),
),
height: 150,
),
),
),
);
},
),

How to disable a button if the user is not inside a certain radius?

So basically I wanted to disable the button at first until or if the user enters a certain radius then the button would be enabled again but I'm not sure how to do it so here's the example of my code which i wanted to disable the button on the 'Reserve parking' button. Here's the code to the page.
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:parkingtechproject/Screens/reportfeedback.dart';
import 'package:parkingtechproject/authenticate/sign_in.dart';
import 'package:parkingtechproject/model/parking.dart';
import 'car_reservation.dart';
import 'maps.dart';
import 'profile_page.dart';
class Home extends StatefulWidget{
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
late String _timeString;
bool isButtonActive = true;
//firebase instance
User? user = FirebaseAuth.instance.currentUser;
Parking loginuser = Parking();
#override
void initState(){
super.initState();
FirebaseFirestore.instance
.collection('parkingTech')
.doc(user!.uid)
.get()
.then((value){
this.loginuser = Parking.fromMap(value.data());
setState(() {});
});
}
//Sign Out
Future <void> logout(BuildContext context) async {
await FirebaseAuth.instance.signOut();
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => LoginScreen()));
}
// void initState(){
// _timeString = "${DateTime.now().hour} : ${DateTime.now().minute} :${DateTime.now().second}";
// Timer.periodic(Duration(seconds:1), (Timer t)=>_getCurrentTime());
// super.initState();
// }
Widget build(BuildContext context){
return Scaffold(
backgroundColor: Colors.amber,
appBar: AppBar(
backgroundColor: Colors.amber,
elevation: 0.0,
title: Text('Parking Tech',
style:TextStyle(
color: Color(0xFF121212),
fontWeight: FontWeight.bold,
),
),
centerTitle:true,
actions: [
IconButton(onPressed: (){
logout(context);
},
icon: Icon(
Icons.logout,
size: 25,
),
),
]
),
body: Column(
children:[
Expanded(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/Parkingtech.png'
),
// image: NetworkImage(
// 'https://www.istockphoto.com/photo/car-icon-special-black-square-button-gm624404280-109743191?utm_source=unsplash&utm_medium=affiliate&utm_campaign=srp_photos_top&utm_content=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fcar-icon&utm_term=car%20icon%3A%3Asearch-explore-top-affiliate-outside-feed%3Aenabled'),
fit: BoxFit.fill),
),
),
),
Expanded(
child:Container(
color: Color(0xFF121212),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
Text("Welcome, ${loginuser.name}",
style: const TextStyle(
color: Colors.white,
fontWeight:FontWeight.normal,
fontSize: 15,
),
),
const SizedBox( height: 10),
Text("Car Plate : ${loginuser.car}",
style: const TextStyle(
color: Colors.white,
fontWeight:FontWeight.normal,
fontSize: 15,
),
),
const SizedBox( height: 10),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFFF59539),
Color(0xFFF59222),
Color(0xFFD97503),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(10.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 13.1),
),
onPressed: isButtonActive?() {
setState(() {
isButtonActive = false;
});
Navigator.push(context,MaterialPageRoute(builder: (context) => Reservation()));
} : null,
child: const Text('Reserve parking? '),
),
],
),
),
const SizedBox(height: 15,),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFFF62626),
Color(0xFFDB1010),
Color(0xFFC60505),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(10.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 15),
),
onPressed: () {
showDialog(context: context, builder: (context) => const FeedbackDialog());
},
child: const Text('Make a report ?'),
),
],
),
),
const SizedBox(height: 12,),
],
)
),
),
),
],
),
);
}
And here is the code to the maps page.
import 'package:easy_geofencing/easy_geofencing.dart';
import 'package:easy_geofencing/enums/geofence_status.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:provider/provider.dart';
import 'dart:async';
import 'package:geolocator/geolocator.dart';
import '../provider/location_provider.dart';
class GoogleMapPage extends StatefulWidget {
#override
_GoogleMapPageState createState() => _GoogleMapPageState();
}
class _GoogleMapPageState extends State<GoogleMapPage> {
late StreamSubscription<GeofenceStatus> geofenceStatusStream;
Geolocator geolocator = Geolocator();
String geofenceStatus = '';
bool isReady = false;
late Position position;
TextEditingController latitudeController = new TextEditingController();
TextEditingController longitudeController = new TextEditingController();
TextEditingController radiusController = new TextEditingController();
#override
void initState(){
getCurrentPosition();
super.initState();
// tz.initializeTimeZones();
Provider.of<LocationProvider>(context,listen:false).initalization();
}
getCurrentPosition() async {
position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
print("LOCATION => ${position.toJson()}");
isReady = (position != null) ? true : false;
EasyGeofencing.startGeofenceService(
// pointedLatitude: "2.2276356",
// pointedLongitude: "102.4568397",
pointedLatitude: "2.221395",
pointedLongitude: "102.453115",
radiusMeter: "30",
eventPeriodInSeconds: 5
);
StreamSubscription<GeofenceStatus> geofenceStatusStream = EasyGeofencing.getGeofenceStream()!.listen(
(GeofenceStatus status) {
print(status.toString());
});
}
setLocation() async {
await getCurrentPosition();
print("POSITION => ${position.toJson()}");
latitudeController =
TextEditingController(text: position.latitude.toString());
longitudeController =
TextEditingController(text: position.longitude.toString());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hotspot Checker"),
),
body: googleMapUI(),
);
}
}
Widget googleMapUI(){
EasyGeofencing.startGeofenceService(
pointedLatitude: "2.2741204",
pointedLongitude: "102.4448842",
radiusMeter: "10",
eventPeriodInSeconds: 5
);
Set<Circle> mycircles = Set.from([Circle(
circleId: CircleId('0'),
center: LatLng(2.221395, 102.453115),
radius: 6,
strokeWidth: 1,
fillColor:(Colors.red),
),
Circle(
circleId: CircleId('1'),
center: LatLng(2.2065488, 102.2244857),
radius: 4,
strokeWidth: 1,
fillColor:(Colors.yellow),
)]);
return Consumer<LocationProvider>(
builder:(consumerContext,model,child){
if(model.locationPosition != null)
{
return Column(
children: [
Expanded(
child: GoogleMap(
mapType:MapType.normal,
initialCameraPosition: CameraPosition(
target: model.locationPosition,
zoom: 18,
),
circles: mycircles,
myLocationEnabled: true,
myLocationButtonEnabled: true,
onMapCreated: (GoogleMapController controller){
},
),
),
],
);
}
return Container(
child: Center(child: CircularProgressIndicator(),),
);
}
);
}
Basically, I'm not sure how to make both of these pages combine together.

How detect a change on state of flutter widget

I need to detect when my phoneCall variable changes state this to detect when the call ended and show a modal to the user so he can rate the call. This is the widget code.
import 'dart:convert';
import 'package:avanx/flutter/loading_view.dart';
import 'package:avanx/globals.dart';
import 'package:avanx/models/group.dart';
import 'package:avanx/models/prospect.dart';
import 'package:cool_alert/cool_alert.dart';
import 'package:flutter_phone_state/flutter_phone_state.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:url_launcher/url_launcher.dart';
import '../flutter/theme.dart';
import 'package:avanx/flutter/input_widget.dart';
import '../flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:avanx/flutter/drawer_widget.dart';
import 'package:loading_animations/loading_animations.dart';
import 'package:http/http.dart' as http;
class LeadsHomeWidget extends StatefulWidget {
LeadsHomeWidget({Key key}) : super(key: key);
#override
_LeadsHomeWidgetState createState() => _LeadsHomeWidgetState();
}
class _LeadsHomeWidgetState extends State<LeadsHomeWidget> {
List<dynamic> _leads = [];
List<dynamic> _groups;
var phoneCall;
TextEditingController textController;
final scaffoldKey = GlobalKey<ScaffoldState>();
GlobalKey<FormState> _formKey = GlobalKey();
String _search = '';
_initCall(_number) async {
setState(() {
phoneCall = FlutterPhoneState.startPhoneCall(_number);
});
}
showCallInfo() {
print(phoneCall
.status); // ringing, dialing, cancelled, error, connecting, connected, timedOut, disconnected
print(phoneCall.isComplete); // Whether the call is complete
print(phoneCall
.events); // A list of call events related to this specific call
}
// Metodo para la obtención de los grupos existentes.
getGroups() async {
print("hello");
final response = await http.get(Uri.parse(Globals.avanx + '/groups'),
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
var groupsList = json.decode(response.body)['groups'];
List<dynamic> groups =
groupsList.map((element) => new Group.fromJson(element)).toList();
setState(() {
_groups = groups;
});
} else {
throw Exception('Failed to load groups');
}
}
getLeads(name) async {
if (name != '') {
String auth = Globals.authUser.user.id.toString();
final response = await http.post(
Uri.parse(Globals.avanx + '/prospects/search/$auth'),
body: {'name': name},
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
var leadsList = json.decode(response.body)['leads'];
List<dynamic> leads =
leadsList.map((element) => new Prospect.fromJson(element)).toList();
setState(() {
_leads = leads;
});
} else {
throw Exception('Failed to load leads');
}
} else {
setState(() {
_leads = [];
});
}
}
deleteModal(id) {
CoolAlert.show(
context: context,
animType: null,
type: CoolAlertType.warning,
title: '¿Estas Seguro?',
text: "Esta acción no se puede reversar.",
backgroundColor: Color(0xBF35126A),
confirmBtnText: 'Confirmar',
confirmBtnColor: Color(0xBF35126A),
showCancelBtn: true,
cancelBtnText: 'Cancelar',
onConfirmBtnTap: () {
deleteLead(id);
Navigator.pop(context);
});
}
deleteLead(id) async {
final response = await http.delete(
Uri.parse(Globals.avanx + '/prospects/$id'),
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
_search = '';
this.getLeads(_search);
} else {
throw Exception('Failed to load leads');
}
}
#override
void initState() {
textController = TextEditingController();
this.getGroups();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: FlutterTheme.tertiaryColor,
appBar: AppBar(
backgroundColor: FlutterTheme.primaryColor,
title: Text(
'Prospectos',
style: TextStyle(fontFamily: 'Montserrat'),
),
centerTitle: true,
),
drawer: DrawerWidget(),
body: _groups == null
? LoadingWidget()
: Align(
alignment: Alignment(0, 0),
child: Padding(
padding: EdgeInsets.fromLTRB(30, 10, 30, 0),
child: ListView(
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
children: _groups == null
? []
: [
Form(
key: _formKey,
child: Row(
children: [
Expanded(
flex: 2,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 15),
child: InputWidget(
label: 'Buscar prospecto?',
keyBoardType: TextInputType.text,
onChanged: (text) {
_search = text;
},
validator: (text) {
if (text.trim().length == 0) {
return "input data";
}
return null;
},
),
),
),
Expanded(
child: ElevatedButton(
child: Text(
'Buscar',
style: TextStyle(
color: FlutterTheme.primaryColor),
),
onPressed: () {
getLeads(_search);
},
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: FlutterTheme.primaryColor,
),
primary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
],
),
),
phoneCall.isComplete
? Container(
child: Text('The call is end!!'),
)
: Container(),
for (var lead in _leads ?? [])
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
color: Colors.white,
child: ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
'https://ui-avatars.com/api/?name=' +
lead.name +
'&background=35126A&color=fff&size=128'),
),
title: Text(lead.name),
subtitle: Text(
'Grupo: ' + lead.group.name,
style: TextStyle(fontSize: 11),
),
trailing: Container(
width: 100,
child: Row(
children: [
IconButton(
onPressed: () {
_initCall(lead.phone);
},
icon: Icon(
Icons.phone,
size: 35,
color: Color(0xFF35126A),
)),
IconButton(
onPressed: () {
showCallInfo();
},
icon: Icon(
Icons.mail_outline,
size: 35,
color: Color(0xFF35126A),
)),
],
),
),
),
),
secondaryActions: <Widget>[
IconSlideAction(
onTap: () {
Navigator.pushNamed(context, 'leads_edit',
arguments: lead);
},
caption: 'Edit',
color: Color(0xFF35126A),
icon: Icons.edit,
),
IconSlideAction(
onTap: () {
deleteModal(lead.id);
},
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: ButtonWidget(
onPressed: () {
Navigator.pushNamed(context, 'leads_add_new');
},
text: 'Agregar Nuevo',
options: ButtonOptions(
width: 130,
height: 40,
color: FlutterTheme.tertiaryColor,
textStyle: FlutterTheme.subtitle2.override(
fontFamily: 'Montserrat',
color: FlutterTheme.primaryColor,
),
borderSide: BorderSide(
color: FlutterTheme.primaryColor,
width: 2,
),
borderRadius: 30,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Text(
'Grupos',
textAlign: TextAlign.center,
style: FlutterTheme.bodyText1.override(
fontFamily: 'Montserrat',
color: Color(0xBF35126A),
fontSize: 20,
),
),
),
for (var group in _groups)
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: ButtonWidget(
onPressed: () {
Navigator.pushNamed(context, 'leads_list',
arguments: group);
},
text: group.name,
options: ButtonOptions(
width: 130,
height: 40,
color: FlutterTheme.primaryColor,
textStyle: FlutterTheme.subtitle2.override(
fontFamily: 'Montserrat',
color: Colors.white,
),
borderSide: BorderSide(
color: Colors.transparent,
width: 1,
),
borderRadius: 30,
),
),
),
],
),
),
),
);
}
}
The function _initCall is the one in charge of initializing the call, so the variable phoneCall will have the information of the state of the call, I want to launch a modal when the call finishes.