I have used this solution How Can I generate QR code and Show it on a PDF page in Flutter but still QR Code isn't being printed.
My code:
pdf.BarcodeWidget(
color: PdfColor.fromHex("#000000"),
barcode:pdf.Barcode.qrCode(), data: "My name is Bilal"
),
This is my function:
Future<Uint8List> func_generate_sale_pdf(PdfPageFormat format) {
final doc = pdf.Document();
doc.addPage(pdf.Page(build: (pdf.Context context) {
return pdf.Center(
child: pdf.Column(children: <pdf.Widget>[
pdf.Text(config.app_name.toUpperCase(),
style:
pdf.TextStyle(fontSize: 32, fontWeight: pdf.FontWeight.bold)),
pdf.SizedBox(height: 25),
pdf.Text(
" ${languages.skeleton_language_objects[config.app_language]['for_enquiries_call']} : ${config.app_contacts}",
style: pdf.TextStyle(fontSize: 22)),
pdf.SizedBox(height: 5),
pdf.Text("${config.app_po_box}", style: pdf.TextStyle(fontSize: 22)),
pdf.SizedBox(height: 5),
pdf.Text(
"${languages.skeleton_language_objects[config.app_language]['receipt']} # ${receipt_data['receipt_no']}",
style: pdf.TextStyle(fontSize: 20)),
pdf.SizedBox(height: 5),
pdf.Text("${receipt_data['date_time']}",
style: pdf.TextStyle(fontSize: 20)),
pdf.SizedBox(height: 30),
pdf.Container(
alignment: pdf.Alignment.topLeft,
child: pdf.Text("${receipt_data['items_list'].toString()}",
style: pdf.TextStyle(
fontSize: 22, fontWeight: pdf.FontWeight.normal),
textAlign: pdf.TextAlign.left),
),
pdf.SizedBox(height: 30),
pdf.Container(
child: pdf.Row(children: <pdf.Widget>[
pdf.Expanded(
flex: 1,
child: pdf.Text(
languages.skeleton_language_objects[config.app_language]
['total_amount'],
style: pdf.TextStyle(
fontSize: 20, fontWeight: pdf.FontWeight.bold),
textAlign: pdf.TextAlign.left),
),
pdf.Expanded(
flex: 1,
child: pdf.Text("${receipt_data['total_amount']}",
style: pdf.TextStyle(fontSize: 20),
textAlign: pdf.TextAlign.right),
),
])),
pdf.SizedBox(height: 10),
pdf.Container(
child: pdf.Row(children: <pdf.Widget>[
pdf.Expanded(
flex: 1,
child: pdf.Text(
languages.skeleton_language_objects[config.app_language]
['total_items'],
style: pdf.TextStyle(
fontSize: 20, fontWeight: pdf.FontWeight.bold),
textAlign: pdf.TextAlign.left),
),
pdf.Expanded(
flex: 1,
child: pdf.Text("${receipt_data['total_items']}",
style: pdf.TextStyle(fontSize: 20),
textAlign: pdf.TextAlign.right),
),
])),
pdf.SizedBox(height: 10),
pdf.Container(
height: 35,
child: pdf.Row(children: <pdf.Widget>[
pdf.Expanded(
flex: 1,
child: pdf.Text(
languages.skeleton_language_objects[config.app_language]
['total_tax'],
style: pdf.TextStyle(
fontSize: 20, fontWeight: pdf.FontWeight.bold),
textAlign: pdf.TextAlign.left),
),
pdf.Expanded(
flex: 1,
child: pdf.Text("${receipt_data['total_tax_amount']}",
style: pdf.TextStyle(fontSize: 20),
textAlign: pdf.TextAlign.right),
),
])),
pdf.SizedBox(height: 35),
pdf.Text(
languages.skeleton_language_objects[config.app_language]
['thant_you_and_come_again'],
style: pdf.TextStyle(fontSize: 24)),
//From here on, the compiler doesn't print anything.
pdf.BarcodeWidget(
color: PdfColor.fromHex("#000000"),
barcode:pdf.Barcode.qrCode(), data: "My name is Bilal"
),
pdf.Text("SkillzUPP Technologies: +923058431046",
style: pdf.TextStyle(fontSize: 24),
textAlign: pdf.TextAlign.center),
pdf.SizedBox(height: 10),
]),
); // Center
}));
return doc.save();
}
Everything prints fine except QR Code and at that specific line this error is shown at terminal:
Helvetica-Bold has no Unicode support see https://github.com/DavBfr/dart_pdf/wiki/Fonts-Management
I had a problem showing that line "has no Unicode support..." to fix that i created a folder fonts on my project and added some true type fonts to it, then i created a pdf theme for the document like below:
var myTheme = ThemeData.withFont(
base: Font.ttf(await rootBundle.load("fonts/OpenSans-Regular.ttf")),
bold: Font.ttf(await rootBundle.load("fonts/OpenSans-Bold.ttf")),
italic: Font.ttf(await rootBundle.load("fonts/OpenSans-Italic.ttf")),
boldItalic:
Font.ttf(await rootBundle.load("fonts/OpenSans-BoldItalic.ttf")),
);
then i used the theme in the page of the document and the error was gone, like below:
Page(theme: myTheme,...)
I'm not sure if is the same case, but i think you should try.
Related
I would like to make this in Flutter:
My code:
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text('Total', style: TextStyle( color: Color(0xFF68B762)),),
Text('Km', style: TextStyle( color: Color(0xFF68B762)),),
],),
const Text('612', style: TextStyle(fontSize: 30, fontFamily: SecondaryFontMedium, color: Color(0xFF68B762)),),
],),
Result:
Add \n between "Total" and "Km". Use like this way,
Row(
children: [
Text('Total\nKm', textAlign: TextAlign.end, style: TextStyle(color: Color(0xFF68B762))),
Text('612',
style: TextStyle(
fontSize: 30,
fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762))),
],
)
Result:
If you want the Total and Km closer together you could try setting a height in the style. For example
Text('Total', style: TextStyle(height: 1, color: Color(0xFF68B762))),
Text('Km', style: TextStyle(height: 1, color: Color(0xFF68B762)),),
result:
I don't know if the error is the spacing, or that the letters on the left are not aligned, but I got something like this :
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40, // change this
color: Colors.white,
child: FittedBox( // this is important
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Total',
style: TextStyle(color: Color(0xFF68B762)),
),
Text(
'Km',
style: TextStyle(color: Color(0xFF68B762)),
),
],
),
),
),
Container(
height: 40, // change this
color: Colors.white,
child: const FittedBox( // this is important
child: Text(
'612',
style: TextStyle(
height: 1, // this is important
fontSize: 45,
color: Color(0xFF68B762),
),
),
),
),
],
)
What I did was to add both Container with some equal size (40 for example), then using the Widget FittedBox makes that when you lower the height of the container, the letter adapts and you don't have problems...
Now in the second letter to remove the "padding" is added the height : 1 in the TextStyle, if you can read more of it would be good so you don't have problems but basically it makes it possible to align with the left letters.
Try to edit the height Container and you'll see
try this,
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Total\nKm',
textAlign: TextAlign.right,
style: TextStyle(color: Color(0xFF68B762)),
),
SizedBox(
width: 5,
),
Text(
'612',
style: TextStyle(
fontSize: 30,
// fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762)),
),
],
),
),
),
);
Happy Coding!
enter image description here
AutoSizeText(
Dummy.locations[index]['name'],
maxLines: 1,
overflowReplacement: Marquee(
scrollAxis: Axis.horizontal,
velocity: 5,
text: Dummy.locations[index]['name'],
style: const TextStyle(fontSize: 18, color: Colors.white)),
style: const TextStyle(fontSize: 18, color: Colors.white),),
The AutoSizeText widget does not replace to Marquee if the text is overflowed.
I just found out and to someone who needs, we just need to do the following things:
Specify the minFontSize property of AutoSizeText
Wrap Marquee widget with a width and height specified Container or SizedBox as the code below
AutoSizeText(
Dummy.locations[index]['name'],
maxLines: 1,
minFontSize: 18,
overflowReplacement: SizedBox(
width: 180,
height: 18,
child: Marquee(
scrollAxis: Axis.horizontal,
velocity: 5,
text:'${Dummy.locations[index]['name']} ',
style: const TextStyle(fontSize: 18,color: Colors.white)),
),
style: const TextStyle(fontSize: 18, color: Colors.white),
),
When there are no results loaded on the app, there is a headline and subheadline explaining how to work the application.
However, when results are loaded into the app the Headline and subheadline disappear, and then show the imageArray in place of both
I am unable to group the headline and subheadline together because I am following a specific UI, and thus they require different font styles, but adding them both in a separate child seems to throw an error as the child is already specified.
What's the best way to rectify this?
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Center(
child: Text(
‘HEADLINE’,
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
child: Text(
‘SUBHEADLINE’,
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(imageArray.length, (index) {
var img = imageArray[index];
return Container(child: Image.file(img));
})))
]),
)
]));
}
}
According to the official documentation:
All layout widgets have either of the following:
A child property if they take a single child—for example, Center or Container
A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.
The problem with the code is that Center only takes a single widget as its child. In order to display both of your Text, you'll need to use something such as Column with children property. This should work:
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Column( // Use the Column here instead of Center
children: [
Text(
'TITLE',
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Text( // Remove the `child:` property
'SUBTITLE',
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
],
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(
imageArray.length,
(index) {
var img = imageArray[index];
return Container(child: Image.file(img));
},
),
),
);
Change your Center to a Column this can take a List<Widget> called children as opposed to a singular child
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Column(
children: [ Text(
‘HEADLINE’,
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Text(
‘SUBHEADLINE’,
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
]
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(imageArray.length, (index) {
var img = imageArray[index];
return Container(child: Image.file(img));
})))
]),
)
]));
}
You could also add a Column to the child of your Center if you would prefer that styling.
But Column has the built in functionality to display its children where you want with mainAxisAlignment
I have this UI :UI
And the text is showing this yellow bar, even when I set the maxlines to 3..
I put them in a container and its still like this!
child: Container(
height: 150,
width: 200,
child: Column(children: [
Text(
allRecipes[index].name,
style: TextStyle(color: Colors.black54,
fontSize: 20,),
),
Text(
allRecipes[index].about,
softWrap: true,
maxLines: 3,
style: TextStyle(
fontSize: 14,)
),
Also, I need help from you so I can make more space between the food cards??
Its because your Container Height.
try to increase this and check,
your Container height is 150
increase this 200 or 250. as per your design requirement.
Container(
height: 250,//like this
width: 200,
child: Column(children: [
Text(
allRecipes[index].name,
style: TextStyle(color: Colors.black54,
fontSize: 20,),
),
Text(
allRecipes[index].about,
softWrap: true,
maxLines: 3,
style: TextStyle(
fontSize: 14,)
),
]
)
My app runs both on web and device, and when receiving a booking state from bloc I show a bottom sheet show booking details and . When running the app on web showModalBottomSheet shows without problems, but when running the iOS version on iPad I get multiple times the
RenderBox was not laid out: RenderFlex#54b93 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE exception.
Can you spot what I'm missing to do for the CupertinoActionSheet ?
I construct them as:
if (state is BookingsChanged) {
// show booking info pannel
if (UniversalPlatform.isIOS) {
final action = CupertinoActionSheet(
title: AutoSizeText(
AppLocalizations.instance
.text('${state.type} Booking'),
style: TextStyle(fontSize: 25),
minFontSize: 10,
maxLines: 1,
group: autoSizeGroup,
),
message: AutoSizeText(
sprintf(AppLocalizations.instance.text('Date:'), [
dateOnlyFormat.format(
DateTime.fromMillisecondsSinceEpoch(
state.booking.bookingDate))
]) +
'\n' +
sprintf(AppLocalizations.instance.text('At:'), [
timeFormat.format(
DateTime.fromMillisecondsSinceEpoch(
state.booking.bookingStart))
]) +
'\n' +
sprintf(
AppLocalizations.instance.text('Customer:'),
[state.booking.customerName]) +
'\n' +
sprintf(AppLocalizations.instance.text('Works:'),
[state.booking.worksNameList]) +
'\n' +
sprintf(
AppLocalizations.instance
.text('Booking price'),
[state.booking.bookingPrice]),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.black87,
fontWeight: FontWeight.w400),
minFontSize: 10,
maxLines: 4,
group: autoSizeGroup,
),
cancelButton: CupertinoActionSheetAction(
child: AutoSizeText(
AppLocalizations.instance.text('Close'),
minFontSize: 10,
maxLines: 1,
group: autoSizeGroup,
),
onPressed: () {
Navigator.pop(context);
},
),
);
showCupertinoModalPopup(
context: context, builder: (modal) => action);
} else {
//Android
showModalBottomSheet(
context: context,
builder: (modal) => Container(
padding: EdgeInsets.symmetric(horizontal: 200),
color: Colors.white,
child: Container(
decoration: BoxDecoration(
color: Colors.white, //.white,
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 10,
),
AutoSizeText(
AppLocalizations.instance
.text('${state.type} Booking'),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.black87,
fontWeight: FontWeight.w400,
),
minFontSize: 10,
maxLines: 1,
group: autoSizeGroup,
),
SizedBox(
height: 10,
),
AutoSizeText(
sprintf(
AppLocalizations.instance
.text('Date:'),
[
dateOnlyFormat.format(DateTime
.fromMillisecondsSinceEpoch(
state
.booking.bookingDate))
]) +
'\n' +
sprintf(
AppLocalizations.instance
.text('At:'),
[
timeFormat.format(DateTime
.fromMillisecondsSinceEpoch(
state.booking
.bookingStart))
]) +
'\n' +
sprintf(
AppLocalizations.instance
.text('Customer:'),
[state.booking.customerName]) +
'\n' +
sprintf(
AppLocalizations.instance
.text('Works:'),
[state.booking.worksNameList]) +
'\n' +
sprintf(
AppLocalizations.instance
.text('Price:'),
[state.booking.bookingPrice]),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.black87,
fontWeight: FontWeight.w400),
minFontSize: 10,
maxLines: 4,
group: autoSizeGroup,
),
SizedBox(
height: 10,
),
FlatButton(
color: Colors.redAccent,
child: AutoSizeText(
AppLocalizations.instance.text('Close'),
style: TextStyle(
fontSize: 30, color: Colors.white),
minFontSize: 10,
maxLines: 1,
group: autoSizeGroup,
),
onPressed: () {
print('Cancel button pressed');
Navigator.pop(context);
},
),
SizedBox(
height: 10,
),
],
),
),
),
),
);
}
// TODO Send push to customer
if (state.type == "New") {
// send booking received push
BlocProvider.of<PushNotificationBloc>(context).add(
BookingReceivedPushNotification(
booking: state.booking));
// TODO Update booking state
BlocProvider.of<BookingBloc>(context).add(
UpdateBookingState(
user: widget.user,
booking: state.booking,
state: 'Received',
cityDb: widget.cityDb,
regionDb: widget.regionDb,
countryDb: widget.countryDb));
} else {
// send cancellation received push
BlocProvider.of<PushNotificationBloc>(context).add(
BookingCancellationReceivedPushNotification(
booking: state.booking));
}
}
After a few tries I found AutoSizeText be the responsible. I guess that group: parameter as it's initialized in in the screen doesn't get passed to CupertinoActionSheet..anyways I don't need it for iOS.