Develop Reference

For nested list my app crashes while generating pdf in flutter

I am using pdf package for creating a PDF file in my app. I am trying to show transaction list of a month based on day. I was able to create pages for the first list using Wrap() widget. But for the inner transaction list it shows me error for more then 8 element. It doesn't break page automatically for list overflow.
So is there any solution for this problem?
Here is my code
class PdfParagraphApi {
static Future<File> generate(title) async {
final pdf = Document();
final customFont = Font.ttf(await rootBundle.load('assets/OpenSans-Regular.ttf'));
pdf.addPage(
MultiPage(
build: (context) => <Widget>[
Wrap(
children: List<Widget>.generate(7, (index) {
return Container(
margin: EdgeInsets.only(top: 3),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Header(child: Text(
"08 Sep, 2021",
style: TextStyle(
color: PdfColors.purple300,
fontWeight: FontWeight.bold,
fontSize: 17
)
)),
///////////////////////// error starts here ////////////////
Container(
child: Wrap(
children: List<Widget>.generate(9, (ind) {
return cards();
}))
////////////////////////////////////////////////////////
)
]
)
);
})
)
],
),
);
return PdfApi.saveDocument(name: 'my_example.pdf', pdf: pdf);
}
static Widget cards() => Container(
decoration: BoxDecoration(
color: PdfColors.grey300,
borderRadius: BorderRadius.circular(5)
),
margin: EdgeInsets.only(bottom: 8),
child: Container(
// width: 300,
margin: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
"VISA",
style: TextStyle(
fontSize: 16
)
),
),
SizedBox(height: 5),
Container(
child: Text(
"Token: 435645tRER3 Time: 12:45",
),
),
],
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Text(
"GBP 56.07",
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold
)
),
Text(
// " - ${charge.refundDetails.refundedAmount}",
" - 45.87",
style: TextStyle(
fontSize: 12,
color: PdfColors.red,
),
)
],
),
SizedBox(height: 5),
Text(
"refunded",
style: TextStyle(
color: PdfColors.green),
),
SizedBox(height: 5),
Text(
"Captured",
),
],
),
),
],
),
),
),
],
),
),
);
}

Run the ontap() gesture on the card in flutter

I have been trying to run the onTap() function from material package of flutter but it seems to throw me this error:
"The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator."
I am in need of running this function to reach out to the called function of new screen in the application.
The code is below:
class _HomePageState extends State<dashboardpage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
height:130*.99,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: AssetImage('assets/bismillah.png'),fit: BoxFit.fitHeight,
)
),
),
SafeArea(
child: Padding(
padding: EdgeInsets.only(top: 0),
child: Column(
children:<Widget> [
Container(
height: 100.0,
child: Row(
children:<Widget> [
Center(
child: SizedBox(
width: 90.0,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end
)
],
),
),
Expanded(
child:GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
)
),
),
),
)
]
);
}
}
This is the code specimen and the code is stuck on onTap() line.
Please help me!

Use GestureDetector
GestureDetector(onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
)
),
)

setState() called after dispose(): _StatefulBuilderState#09642(lifecycle state: defunct, not mounted)

I'm showing content with bottomsheet, i'm updating folder size after calculating it, using statefulbuilder's setState, i used mounted condition also, then also it showing setState after called dispose, Help me to solve this.
FileStat fileStat = selectedFilesAndFolders.last.statSync();
String size = '0 KB';
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0),
topRight: Radius.circular(12.0),
)),
builder: (context) {
return StatefulBuilder(builder: (context, newSetState) {
getFolderSize(selectedFilesAndFolders.last.path).then((value) {
if (!mounted) return;
newSetState(() {
size = value;
});
});
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 2.0,
),
Text(
'Info',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Name: '))),
Expanded(
child: Text(path
.basename(selectedFilesAndFolders.last.path)))
],
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Size: '))),
Expanded(child: Text(size)),
],
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Last Modified Date: '))),
Expanded(child: Text(fileStat.modified.toString()))
],
),
SizedBox(
height: 2.0,
),
],
),
);
});
});

try the following
if (!mounted){
setState(() {
size = value;
}),
};

Flutter | How to make custom button of BottomNavigationBar in flutter?

I want make a button with text and icon inside it, with custom background color and custom width. with fix position (not scrollable). would you like to help me please ?
here are the code:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
]
its only give a color for the icon.
this is what I want:

Here you go
Widget build(context) {
return Scaffold(
bottomNavigationBar: Container(
height: 56,
margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
child: Row(
children: <Widget>[
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
),
),
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
),
),
],
),
),
);
}

You may want to look at the concept of a BottomAppBar instead.
This bar accepts any widget as children not just BottomNavigationBarItems.
You could try this:
BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: SizedBox(
height: 44,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.blue, size: 24),
Text("Add")
],
),
),
),
),
),
]
),
)

How do I wrap content of PageView so that Indicators appear right below where PageView ends?

How do I wrap content of PageView so that Indicators appear right below where PageView ends ?. Right now PageView fills entire screen and Indicators are at bottom of screen. Below is how each child in PageView is created. In each child I have a Image with default height of 200 and TextView with maxLines of 2 . Though actual height of each child in PageView is half of device screen , it fills entire screen .
final List<Widget> _pages = <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image.network(
'imageurl',
height: 200.0,
fit: BoxFit.fitWidth,
),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)
],
),
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image.network(
'imageurl',
height: 200.0,
fit: BoxFit.fitWidth,
),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
],
),
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image.network(
'imageurl',
height: 200.0,
fit: BoxFit.fitWidth,
),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)
],
)
];
Stateful Widget's Builder method
Widget build(BuildContext context) {
return new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new PageView.builder(
physics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
itemCount: _pages.length,
itemBuilder: (BuildContext context, int index) {
return _pages[index % _pages.length];
},
),
fit: FlexFit.loose,
),
new Container(
color: Colors.black,
padding: const EdgeInsets.all(20.0),
child: new Center(
child: new DotsIndicator(
controller: _controller,
itemCount: _pages.length,
onPageSelected: (int page) {
_controller.animateToPage(
page,
duration: _kDuration,
curve: _kCurve,
);
},
),
),
)
],
);
}

Here my solution, as you didn't pasted entire source code, i have omitted dots section
import 'package:flutter/material.dart';
class PageViewIssue extends StatefulWidget {
PageViewIssue({Key key, this.title}) : super(key: key);
static const String routeName = "/PageViewIssue";
final String title;
#override
_PageViewIssueState createState() => new _PageViewIssueState();
}
class _PageViewIssueState extends State<PageViewIssue> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: _getBodyContent(),
floatingActionButton: new FloatingActionButton(
onPressed: _onFloatingActionButtonPressed,
tooltip: 'Add',
child: new Icon(Icons.add),
),
);
}
void _onFloatingActionButtonPressed() {}
List<Widget> _getPageViews() {
final String imgUrl =
"https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&h=320&w=320";
final List<Widget> _pages = <Widget>[
new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Center(
child: new Image.network(
imgUrl,
height: 200.0,
fit: BoxFit.fitWidth,
)),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)
],
)),
new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Center(
child: new Image.network(
imgUrl,
height: 200.0,
fit: BoxFit.fitWidth,
)),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
],
)),
new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Center(
child: new Image.network(
imgUrl,
height: 200.0,
fit: BoxFit.fitWidth,
)),
new Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"Order from wide range of restaurants",
maxLines: 2,
style: new TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)
],
))
];
return _pages;
}
Widget _getBodyContent() {
var controller = new PageController(initialPage: 0);
var pageView = new PageView(
children: _getPageViews(), pageSnapping: true, controller: controller);
var width = MediaQuery.of(context).size.width;
var expansion1 = new Expanded(
child:
new Container(width: width, child: pageView, color: Colors.green),
flex: 9);
var expansion2 = new Expanded(
child: new Container(
width: width,
child: new Center(child: new Text("Text 2")),
color: Colors.redAccent),
flex: 1);
return new Column(children: <Widget>[expansion1, expansion2]);
}
}
What you were looking for is Constrained Box.