Unable to create a graph with syncfusion_flutter_charts in Flutter

Unable to create a graph with syncfusion_flutter_charts in Flutter - android

I am able to draw a graph in Android emulator but that graph is not working in Android physical device. It is showing gray screen instead of graph.
(https://i.stack.imgur.com/eUpC5.png)(https://i.stack.imgur.com/BspZR.jpg)
#override
Widget build(BuildContext context) {
TextTheme _textTheme = Theme.of(context).textTheme;
// TODO: implement build
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: Row(
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.blueAccent,
size: 20,
),
),
SizedBox(
width: 10,
),
Image.network(
widget.cryptoData.cryptoImage!,
height: 20,
width: 20,
// fit: BoxFit.fill,
),
SizedBox(
width: 6,
),
Text(widget.cryptoData.cryptoName!,
style: _textTheme.labelSmall),
SizedBox(
width: 2,
),
Text('(' + widget.cryptoData.cryptoSymbol! + ')',
style: _textTheme.titleMedium)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
child: Row(
children: [
Text(
"\$" +
limitDecimalToTwo(
widget.cryptoData.cryptoValue.toString()),
style: _textTheme.labelLarge),
SizedBox(
width: 20,
),
Text(
limitDecimalToTwo(
widget.cryptoData.cryptoValueChange.toString()),
style: TextStyle(
color: widget.cryptoData.cryptoValueChange
.toString()[0] ==
'-'
? Colors.red
: Colors.green,
fontSize: 14)),
],
),
),
Expanded(
flex: 4,
child: Container(
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
// primaryYAxis: CategoryAxis(
// isVisible: false,
// majorGridLines: const MajorGridLines(width: 0)),
series: <ChartSeries<CryptoData, String>>[
LineSeries<CryptoData, String>(
dataSource: cryptoDataList,
xValueMapper: (CryptoData crypto, _) =>
getDateInProperFormat(crypto.date),
yValueMapper: (CryptoData crypto, _) => crypto.value),
],
),
)),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.all(15),
child: Expanded(
flex: 2,
child: CryptoRowWidget(
cryptoName: widget.cryptoData.cryptoName,
cryptoCode: widget.cryptoData.cryptoSymbol,
cryptoImage: widget.cryptoData.cryptoImage,
cryptoValue: widget.cryptoData.cryptoValue.toString(),
cryptoValueChange:
widget.cryptoData.cryptoValueChange.toString(),
cryptoQunatityAvailable: '')),
),
Padding(
padding: const EdgeInsets.all(15),
child: Expanded(
flex: 1,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
onPressed: () {
showAlertDialog(context, _textTheme, 'Buy');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
child: Text(
'Buy',
style: _textTheme.bodySmall,
))),
SizedBox(
width: 40,
),
ElevatedButton(
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
onPressed: () {
showAlertDialog(context, _textTheme, 'Sell');
},
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
child: Text(
'Sell',
style: _textTheme.bodySmall,
))),
],
),
),
)
],
),
),
);
}
https://stackoverflow.com/a/72261344/6714054 You can find the answer for similar post but I don't have ListView as parent here.

Related

Padding in ListView Flutter

why I still got error?
import 'package:flutter/material.dart';
import 'package:kosan2_apps/tema.dart';
import 'package:kosan2_apps/widgets/facilities_item.dart';
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
children: [
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
style: blackTextStyle.copyWith(
fontSize: 22,
),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
style: purpleTextStyle.copyWith(
fontSize: 16,
),
children: [
TextSpan(
text: '/ month',
style: greyTextStyle.copyWith(
fontSize: 16,
),
),
],
),
),
],
),
Row(
children: [
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
color: Color(0xff989BA1),
),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FacilitiesItem(
name: 'Kitchen',
imgUrl: 'assets/images/icon_kitchen.png',
totalItem: 2,
),
FacilitiesItem(
name: 'Bedroom',
imgUrl: 'assets/images/icon_bedroom.png',
totalItem: 3,
),
FacilitiesItem(
name: 'Big Cupboard',
imgUrl: 'assets/images/icon_cupboard.png',
totalItem: 4,
),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Location',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
return purpleColor;
},
),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
Can anyone fix it?

You need to place Padding inside the children
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
children: [
Padding( //here
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
// color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
// style: blackTextStyle.copyWith(
// fontSize: 22,
// ),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
// style: purpleTextStyle.copyWith(
// fontSize: 16,
// ),
children: [
TextSpan(
text: '/ month',
// style: greyTextStyle.copyWith(
// fontSize: 16,
// ),
),
],
),
),
],
),
Row(
children: [
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// color: Color(0xff989BA1),
// ),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// FacilitiesItem(
// name: 'Kitchen',
// imgUrl: 'assets/images/icon_kitchen.png',
// totalItem: 2,
// ),
// FacilitiesItem(
// name: 'Bedroom',
// imgUrl: 'assets/images/icon_bedroom.png',
// totalItem: 3,
// ),
// FacilitiesItem(
// name: 'Big Cupboard',
// imgUrl: 'assets/images/icon_cupboard.png',
// totalItem: 4,
// ),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text(
'Location',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
// horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
// style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
// horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
// color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
// backgroundColor: MaterialStateProperty.resolveWith(
// (states) {
// return purpleColor;
// },
// ),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
More about ListView

Alert Dialog widget is causing A RenderFlex overflowed by 92 pixels on the bottom

Would appreciate it if anyone can help me out with the problem I am having while developing the flutter app, Since I am relatively new to flutter, I am using the Expanded(parent) widget under which I am using multiple widgets, & Click on of the widget I am showing alert dialog which has text input, but when someone focuses on the text input I am getting this error. I am wrapping my alert dialog widget under the SingleChildScrollView widget but still getting the error.
///--------Parent WIdget Code------------------------Expanded(
// flex: 1,
// child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(0),
// height: 100,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
SingleChildScrollView(
child: FutureBuilder(
future: getData(),
builder: (context, snapshot) {
return snapshot.hasData
? Column(
children: [
Container(
padding:
const EdgeInsets.fromLTRB(10, 70, 0, 10),
child: const Text("Select Shuttle ID",
style:
TextStyle(fontWeight: FontWeight.bold)),
),
Container(
padding:
const EdgeInsets.fromLTRB(20, 0, 0, 10),
child: DropdownButton<String>(
hint: const Text("Select Shuttle ID"),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(
color: Colors.deepPurple),
underline: Container(
height: 2,
width: 50,
color: Colors.deepPurpleAccent,
),
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
print(
'Selected One: $dropdownValue');
filterData(dropdownValue);
// print(list);
});
},
items: getListData()))
],
)
: const Center(
child: CircularProgressIndicator(
strokeWidth: 3,
),
);
},
)),
Row(
children: [
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(70, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child: Image.asset(
'assets/images/home-page.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Home',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
onTap: () {
GetHome(context);
},
),
])),
Container(
padding: const EdgeInsets.fromLTRB(30, 70, 10, 10),
child: Column(
children: [
Container(
child: BatteryIndicator(
batteryFromPhone: false,
batteryLevel: batteryLevel,
style: BatteryIndicatorStyle.values[0],
colorful: true,
showPercentNum: true,
mainColor: Colors.blue,
size: 25.0,
ratio: 4.0,
showPercentSlide: true,
),
),
const SizedBox(
height: 25,
),
const Text(
'Battery',
style: TextStyle(fontWeight: FontWeight.bold),
)
],
))
],
),
Row(
children: [
Container(
height: 10,
)
],
),
Row(
children: [
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(40, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child: Image.asset(
'assets/images/inventory.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Inventory Check',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
onTap: () {
GetInventory(context);
},
),
])),
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(10, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child:
Image.asset('assets/images/distance.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Pallet Distance',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
onTap: () {
EnterPalletDistance(context);
},
),
]))
],
),
Row(
children: [
Container(
height: 20,
)
],
),
Row(
children: [
Container(
// height: 100,
padding: const EdgeInsets.fromLTRB(90, 50, 10, 0),
child: Wrap(children: [
Material(
elevation: 20,
child: ElevatedButton(
child: Text('STOP'),
style: ElevatedButton.styleFrom(
primary: Colors.red,
padding: const EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
textStyle: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold)),
onPressed: () {
Stop(context);
},
),
),
]),
)
],
),
],
),
],
)),
// )
);
///-------------------- Alert Dialog Code--------------------
EnterPalletDistance(context) {
final isSelected = CheckIfShuttleSelected(context);
// print(isSelected);
if (isSelected) {
// print("CONTEXT IS: $context");
TextEditingController palletDistanceController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
// alignment: Alignment.topCenter,
// scrollable: true,
title: const Text('Enter Pallet Distance'),
content: SingleChildScrollView(
child:
// Column(
// children: <Widget>[
// child:
Container(
// height: 100,
// padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: TextField(
onChanged: (value) {
// print(value);
},
controller: palletDistanceController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter Distance',
),
),
// ),
// ],
),
),
actions: <Widget>[
TextButton(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
textStyle: const TextStyle(color: Colors.white)),
child: const Text('CANCEL'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text('Submit'),
onPressed: () {
Navigator.pop(context);
},
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.green),
),
],
);
})

One possible Solution.
Give Scaffold this property
resizeToAvoidBottomInset: false,

Using carousel slider with page view

I am using carousal slider with page view but when I am sliding the images in scroll view it is sliding to me to next page instead of next image. I just want to slide images when I slide on image and i want to slide to the next page when i slide below the image. but now wherever i slide on the screen it take me to the next page.
This is my page view.
import 'package:bartermade/controllers/profileController.dart';
import 'package:bartermade/models/tradeModel.dart';
import 'package:bartermade/widgets/profileView.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../screens/home/bottomBarViews/homeView/categoriesDetailScreen.dart';
class PageViewHolder extends StatelessWidget {
final PageController pageController = PageController(
initialPage: 0,
);
ProfileController _profileController = Get.find();
final String reciverId;
final String currentUserId;
final TradeModel catData;
PageViewHolder(
{required this.reciverId,
required this.currentUserId,
required this.catData});
var followersList = ['Ali', 'Hussain', 'Hassan', 'Akhtar'];
#override
Widget build(BuildContext context) {
// print("cat ID " + "${catData.user.id}");
// print("profile ID " + "${_profileController.profileId}");
return Scaffold(
body: PageView(
// physics: catData.user.id != _profileController.profileId.value
// ? AlwaysScrollableScrollPhysics()
// : NeverScrollableScrollPhysics(),
physics: ClampingScrollPhysics(),
pageSnapping: false,
onPageChanged: (index) {
},
controller: pageController,
children: [
//first screen in page view
TradeDetailScreen(
catData: catData,
currentUserId: currentUserId,
reciverId: reciverId,
),
//second screen here
ProfileView(
firstName: catData.user.firstName,
lastName: catData.user.lastName,
followers: followersList,
profileUrl: catData.user.profilePictureUrl,
screenState: true,
),
],
),
);
}
}
And this is my screen page
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) => SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
Get.back();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
)),
Container(
clipBehavior: Clip.antiAlias,
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: '${widget.profileUrl}',
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
SizedBox(
width: 7,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${widget.lastName ?? " " "${widget.firstName ?? " "}"}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
2),
),
widget.catData["user"] ==
profileController.userId.value
? Container(
height: 0,
width: 0,
)
: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Follow',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20)))),
],
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'4.3',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
1.8),
),
Icon(
Icons.star,
size: 15,
color: Colors.yellow,
),
],
),
],
),
)
],
),
),
Column(
children: [
widget.catData["pictures"] == [] ||
widget.catData["pictures"].length == 0 ||
widget.catData["pictures"].isEmpty ||
widget.catData["pictures"] == null
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
child: Center(child: Text(" No Image to show")))
: Stack(
children: [
CarouselSlider(
items: widget.catData["tradeWithPictures"]
.map<Widget>((e) {
return Container(
width: Get.width,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: e['url'],
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
);
}).toList(),
carouselController:
postController.carouselController,
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: true,
height: Get.height * .7,
viewportFraction: 1.0,
enlargeCenterPage: false,
aspectRatio: 1 / 1.3,
onPageChanged: (index, reason) {
// postController.tradeImagesIndex(index);
// postController.carouselController.nextPage();
},
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.3,
bottom:
MediaQuery.of(context).size.height * 0.3,
left: 0,
right: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Icon(Icons.arrow_back_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.previousPage();
},
),
ElevatedButton(
child: Icon(Icons.arrow_forward_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.nextPage();
},
),
],
),
),
),
],
),
SizedBox(
height: 10,
),
],
),
Container(
margin: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.catData["title"],
style: TextStyle(
color: AppColors.detailTextsColor,
fontWeight: FontWeight.bold),
),
profileController.userId == widget.catData["user"]
? Container(
height: 0,
width: 0,
)
: InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Offer Trade',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
],

Cannot Scroll ListView inside FutureBuilder

I have tried almost all the solution on stackoverflow like using Expanded widget with single child scroll view and physics property and what not but still cannot enable scroll inside futurebuilder which occupy second half of my screen, the first half is static but second half contains listview inside future builder but it's not scrollable !!
The Error is Bottom Overflowed by 1313 pixels
This Is My Code
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: true,
body:Container(
child: Column(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15,12,15,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset('assets/hamburger.png',height: 25,width: 25,alignment: Alignment.topLeft,),
Image.asset('assets/log.png',height: 37,width: 37,alignment: Alignment.center,),
Image.asset('assets/searc.png',height: 25,width: 25,alignment: Alignment.topRight,),
],
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(img)
),
// split(data[index]["image"])
SizedBox(width: 20,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Text('Hello',style: TextStyle(
color: Colors.black,
fontSize: 15,
),textAlign: TextAlign.start,),
SizedBox(width: 5,),
Text(name,style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
),textAlign: TextAlign.start,),
],
),
Text('Welcome To Quad Life',style: TextStyle(
color: Colors.grey,
fontSize: 13,
),textAlign: TextAlign.start,),
],
),
],
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width:MediaQuery.of(context).size.width*0.4,
height: 70,
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data.length.toString(),
style:
TextStyle(color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),),
SizedBox(height: 5,),
Text('Operators',style:
TextStyle(color: Colors.grey,
fontSize: 15,
fontWeight: FontWeight.bold),),
],
),
),
),
),
SizedBox(
width:MediaQuery.of(context).size.width*0.4,
height: 70,
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data1.length.toString(),style:
TextStyle(color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),),
SizedBox(height: 5,),
Text('Supervisors',style:
TextStyle(color: Colors.grey,
fontSize: 15,
fontWeight: FontWeight.bold),),
],
),
),
),
),
],
),
),
Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Card(
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 150,
child: LineChart(
LineChartData(
borderData: FlBorderData(
show: true,
border: Border.all(width: 0)
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
show: false,
bottomTitles: SideTitles(
showTitles: true,
)
),
maxX: 50,
maxY: 100,
minX: 0,
minY: 0,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 50),
FlSpot(10, 60),
FlSpot(15, 55),
FlSpot(20, 60),
FlSpot(30, 70),
FlSpot(40, 65),
FlSpot(50, 90),
],
isCurved: true,
colors: [Colors.orange,Colors.orangeAccent.shade700],
barWidth: 5,
belowBarData: BarAreaData(
show: true,
colors: gradientcolors.map((e) => e.withOpacity(0.3)).toList()
)
),
],
)
),
),
),
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width:MediaQuery.of(context).size.width*0.45,
height: 70,
child: Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New Operator',style:
TextStyle(color: Colors.black,
fontSize: 14,),),
SizedBox(height: 5,),
Text('Register new verfied Operator',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.grey,
fontSize: 9,
fontWeight: FontWeight.bold),),
],
),
),
),
),
SizedBox(
width:MediaQuery.of(context).size.width*0.45,
height: 70,
child: Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New Supervisors',style:
TextStyle(color: Colors.black,
fontSize: 14,),),
SizedBox(height: 5,),
Text('Register new verfied Supervisors',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.grey,
fontSize: 9,
fontWeight: FontWeight.bold),),
],
),
),
),
),
],
),
),
],
),
SizedBox(height: 5,),
Padding(
padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('Verify Operators',style: TextStyle(
color: Colors.grey.shade500,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
FutureBuilder(
builder: (context, snapshot){
if(snapshot != null){
return Column(
children: [
ListView.builder(
scrollDirection: Axis.vertical,
physics:NeverScrollableScrollPhysics(),
shrinkWrap: true,
// builder: (BuildContext context, int index) {
// return SizedBox(height: 0);
// },
itemCount: data == null ? 0 :data.length ,
itemBuilder: (context, index){
return InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
height: MediaQuery.of(context).size.height*0.1,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 15),
child: SizedBox(
height: 50,
width: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(
image: NetworkImage(split(data[index]["image"])),
),
),
),
),
SizedBox(width: 10,),
Padding(
padding: const EdgeInsets.only(top: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data[index]["fullName"],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),),
Text(capitalize(data[index]["experience"][data[index]["experience"].length-1]['designation']),
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.w100
),),
],
),
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: TextButton(onPressed: (){},
child: Text('Verify Now',style:
TextStyle(color: Colors.green,fontWeight: FontWeight.bold,
fontSize: 15),),),
)
],
),
),
),
);
},
),
],
);
}else{
return CircularProgressIndicator();
}
},
),
],
),
),
),
);
}

=>Change Second half with this
Expanded(
flex: 1,
child: FutureBuilder(
builder: (context, snapshot) {
if (snapshot != null) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
// builder: (BuildContext context, int index) {
// return SizedBox(height: 0);
// },
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
height:
MediaQuery.of(context).size.height * 0.1,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 15),
child: SizedBox(
height: 50,
width: 50,
child: ClipRRect(
borderRadius:
BorderRadius.circular(15),
child: Image(
image: NetworkImage(split(
data[index]["image"])),
),
),
),
),
SizedBox(
width: 10,
),
Padding(
padding:
const EdgeInsets.only(top: 25),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data[index]["fullName"],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
Text(
capitalize(data[index]
["experience"][data[index]
["experience"]
.length -
1]['designation']),
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight:
FontWeight.w100),
),
],
),
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: TextButton(
onPressed: () {},
child: Text(
'Verify Now',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
)
],
),
),
));
});
} else {
return CircularProgressIndicator();
}
},
),
),

Try below format hope its helpful to you. Wrap your FutureBuilder inside Expanded or Flexible
body: Column(
children: [
Container(),
Expanded(
child: FutureBuilder(
future: yourFutureCall();
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
return ListView.builder(
shrinkWrap: true,
physics:
const NeverScrollableScrollPhysics(), //OR use -> const ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Container();
},
);
},
),
),
],
),

I'm not sure , cause I could not run the code , but What I see is the unbounded widgets from lack of the specified width and height which is a common mistake in flutter world .
if #Jasmin Sojitra's answer does not work try putting height and width of full screen on the first Container , If still there is a problemt put child of the Container inside a SingleChildScrollView .

How to fix button in end of the screen

Hi I have this UI and I want to set button in end of the screen. How can I do this?
This is my code. This code is show how I design this UI. I want to know how I can set button in end of screen.I set the up
TextField in padding To be spaced with the button.I try to increase the value of padding but it don't work good. Do I have other solution?
Container(
height: height,
width: width,
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10, top: 30),
child: new InputField(
textController: receiverController,
hint: 'نام گیرنده پیام را وارد کنید',
label: 'گیرنده',
obscure: false,
icon: Icons.person_add_alt_1_outlined,
radius: 15,
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: subjectController,
hint: 'عنوان پیام را وارد کنید',
label: ' عنوان ',
obscure: false,
icon: Icons.title,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: textController,
// hint: 'پیام ',
label: ' متن',
obscure: false,
icon: Icons.message,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: width * .25,
height: 50,
child: new RaisedButton(
onPressed: () {
this.newmessageBloc.add(new NewmessageEventSend(
receiver: receiverController.text,
subject: subjectController.text,
text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
)

you can use Expanded widget on a Column and after that write you'r btn like this:
Column(
children: [
Expanded(
child: Container(
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding:
const EdgeInsets.only(left: 15, right: 10, top: 30),
child: Text(""),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: Text(""),
),
SizedBox(
height: 10,
),
],
),
),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: 25,
height: 50,
child: new RaisedButton(
onPressed: () {
// this.newmessageBloc.add(new NewmessageEventSend(
// receiver: receiverController.text,
// subject: subjectController.text,
// text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
),
],
)
sorry, I was forced to remove some part of code, because i didn't know about them.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Unable to create a graph with syncfusion_flutter_charts in Flutter - android

Related

Padding in ListView Flutter

Alert Dialog widget is causing A RenderFlex overflowed by 92 pixels on the bottom

Using carousel slider with page view

Cannot Scroll ListView inside FutureBuilder

How to fix button in end of the screen

Categories

Resources