I'm a new flutter developer and I am using fl_chart to make some dashboards.
My charts are well displayed with the web window on full screen (screen 2) , and once I try to resize my window, at a certain time, pie charts become bigger than the parent container (screen 1)
Any idea how should I solve the issue ?
Expanded(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading:
MediaQuery.of(context).size.width < 600,
leading: IconButton(
color: Color(0xff2A3F54),
icon: Icon(FontAwesomeIcons.chartLine),
onPressed: () {
//
}),
title: Text('Dashboard 2022', style: TextStyle(
color: Color(0xff2A3F54)
)),
),
body: Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
childAspectRatio: 2,
),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(12.0),
child: _pages[index],
);
},
),
),
),
),
piechart.dart build method :
Widget build(BuildContext context) {
return FutureBuilder(
future: _getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Card(
color: Colors.white,
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
padding:
EdgeInsets.only(left: 20.0, top: 8.0, bottom: 8.0),
child: //(this.title!= null) ?
Text(
getTitle(),
style:
TextStyle(color: Color(0xff2A3F54), fontSize: 16),
textAlign: TextAlign.left,
),
),
),
const Divider(
height: 4,
thickness: 1,
indent: 20,
endIndent: 20,
color: Color(0xffB0BEC5),
),
Expanded(
child: Row(children: <Widget>[
Expanded(
child: PieChart(
PieChartData(
startDegreeOffset: 180,
borderData: FlBorderData(
show: false,
),
sectionsSpace: 1,
centerSpaceRadius: 0,
sections: showingSections(snapshot.data)),
),
),
const SizedBox(
width: 40,
),
showingPieChartIndicator(snapshot.data),
]),
)
],
),
//),
);
} else
return Center(child: CircularProgressIndicator());
});
}
Related
I am trying to recreate the main page of Spotify. At first I wasn't able to make my navigation bar transparent then I learned that I should use extendBody: true property. It worked and I got a transparent navigation bar but now it seems like it changed the space between the items on the screen and I am clueless at this point. This is the part where I added extendBody property:
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(
backgroundColor: Color(0xFF212121),
title: Text("Spotify", style: TextStyle(fontFamily: 'Work Sans', fontWeight: FontWeight.bold)),
elevation: 0,
actions: [
IconButton(onPressed: (){}, icon: Icon(Icons.notifications_outlined)),
IconButton(onPressed: (){}, icon: Icon(Icons.history)),
IconButton(onPressed: (){}, icon: Icon(Icons.settings)),
],
),
And this is the part that forms gridlist and the problematic part:
FutureBuilder<List<GridListe>>(
future: gridListeyiGetir(),
builder: (context, snapshot){
if(snapshot.hasData){
var gridListe = snapshot.data;
return Padding(
padding: const EdgeInsets.only(top: 15),
child: GridView.builder(
shrinkWrap: true,
itemCount: gridListe!.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 3/1),
itemBuilder: (context, index){
var list = gridListe[index];
return Card(
semanticContainer: true,
color: Color(0xFF535353),
child: Row(
children: [
Image.asset("resimler/${list.listeResmi}", fit: BoxFit.fitHeight),
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text(list.listeAdi, style:TextStyle(color: Colors.white,fontFamily: 'Work Sans' ,fontWeight: FontWeight.bold) , ),
),
],
),
);
}
),
);
}else{
return const Center();
}
},
),
Padding(
padding: const EdgeInsets.only(right: 280),
child: const Text("Made For You", style: TextStyle(color: Colors.white, fontFamily: 'Work Sans',fontWeight: FontWeight.bold, fontSize: 15)),
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: SizedBox(
height: 180,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 160,
child: Card(
elevation: 0,
color: Color(0xFF212121),
child:
Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("resimler/dailymix1.jpg"),
Text("Daily Mix 1", style: TextStyle(color: Colors.white, fontFamily: "Work Sans", fontWeight: FontWeight.bold), ),
],
),
),
),
As can be seen in the images the grid list and "Made For You" text should be somewhat close to eachother however its not the case.
when extendBody:false
when extendBody:true
Tell me how to add widgets to the top and bottom of this list using GridView.builder?
I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?
Widget build(BuildContext context)
{
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(...);
}
),
Padding(child: TextField(...))
],
),
);
}
Try below code:
SingleChildScrollView(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: const Text(
'Your Apper Widget',
textAlign: TextAlign.center,
),
),
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text('userList'),
),
);
},
),
Container(
width: double.infinity,
height: 50,
color: Colors.red,
child: const Text(
'Your Lower Widget',
textAlign: TextAlign.center,
),
),
],
),
),
Try this code :
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.red,
height: 48.0,
),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, index) => const FlutterLogo(),
itemCount: 20,
),
),
Container(
color: Colors.green,
height: 48.0,
)
],
),
I'm trying to do a homepage where it will scrollable with 3 or 4 titles and a horizontal lists for products once i put the ListView.builder i get this error: Incorrect use of ParentDataWidget.
Can someone gives me the best solution of what I'm trying to do.
i already tried Expanded and Flexible for the ListView.builder nothing worked.
if i removed the Expanded the error will be: Horizontal viewport was given unbounded height.
My snippet code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? ListView(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
)
: Center(
child: CircularProgressIndicator(),
),
);
}
Widget _buildCategoryThumbnail(Collection category, int index) {
return InkWell(
onTap: () {
_navigateToCollectionDetailScreen(
thisTwoCategories[index].id, thisTwoCategories[index].title);
},
child: Container(
alignment: Alignment.topCenter,
width: MediaQuery.of(context).size.width / 2.1,
height: displayHeight(context) * .10,
decoration: category.image.originalSource != null
? BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
category.image.originalSource,
)))
: BoxDecoration(),
child: Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.bottomCenter,
child: Text(
category.title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
);
}
i solved the issue Thanks guys!
SingleChildScrollView(
child: Container(
child: Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Container(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
),
ListView must be a child of Expanded and Expanded has to be a child of Column.
Try below code
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 30,
),
),
title: Text("Home"),
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
],
),
body: (_isLoading)
? Container(child:Column(
children: [
SizedBox(
height: 10,
),
TitleSlider(title: 'Category'),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(0),
itemCount: thisTwoCategories.length,
itemBuilder: (context, int index) {
return _buildCategoryThumbnail(
thisTwoCategories[index], index);
}),
)
],
))
: Center(
child: CircularProgressIndicator(),
),
);
You cannot use Expanded as ListView's child. If you use something like below code, it'll be work. You need to give height or/and width when you use ListView.
Container(
width: something,
child: aWidget,
)
ListView should not be used inside Expanded or Flexible. Only row, column or flex is allowed.
A Container of fixed width/height or ConstrainedBox can be used
Ex:
ConstrainedBox(
constraints: BoxConstraints(minHeight: 50, maxHeight: 500),
child: ListView.builder(...),
)
To solve this problem you have to remove Expanded widget or Flex widget.
I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image:
AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
),
);
}
The best thing to use for your case is Slivers, it will allow you to scroll through both the ListView and GridView together smoothly.
An example is as follows:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Text('hello'),
),
);
},
);
}).toList(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20.0),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
}, childCount: 5),
)
],
),
);
}
}
Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()
Code:
ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image: AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: PageScrollPhysics(),
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
physics: PageScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
);
I have a ListView that is seperated by a divider and is called as shown below.
I have called all the elements however the last tile gets cut on my screen. I've tried adding the SliverPadding around the List but it doesn't help and crops the list even more.
This is the code for my ListView:
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80.0),
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.09,
bottom: MediaQuery.of(context).size.height * 0.015,
left: 18.0),
child: Text("Puppies",
style: khomeStyle.copyWith(color: kOrange, fontSize: 27)),
),
),
SliverFillRemaining(
child: ListView.separated(
itemCount: 10,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
]),
),
],
),
);
}
This is what the ListView looks like:
https://i.stack.imgur.com/vyL2x.png
If you are not looking for Slivers, try below code. this will scroll till last item and nothing will be cropped.
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: SingleChildScrollView(
child: ListView.separated(
itemCount: 10,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
),
);
}