This is my code to show pdf when clicked the button but for some reason, pdf is not displaying. I don't know what to do.
import 'package:flutter/material.dart';
import 'package:pdf_flutter/pdf_flutter.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Network PDF Viewer"),
),
body: Center(
child: TextButton(
onPressed: () {
PDF.network(
'https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf',
height: 300,
width: 200,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
);
},
child: Container(
height: 30,
width: 100,
child: Center(
child: Text(
'Open PDF',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
));
}
}
I want my users to access the pdf by clicking on the button but the pdf is not displaying no matter how many times I click the button.
You cannot use PDF.network as on Pressed method, instead, do it like this
bool openedPDF = false;
Center(
child: TextButton(
onPressed: () {
setState((){openedPDF = true;});
},
child: Container(
height: 30,
width: 100,
child: Center(
child: Text(
'Open PDF',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
));
Visibility(
visible : openedPDF,
child:PDF.network(
'https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf',
height: 300,
width: 200,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
);
Try this package
flutter_cached_pdfview
PDF().cachedFromUrl(widget.url,
placeholder: (progress) => Center(
child: Text("Loading - $progress %"),
),
errorWidget: (error) => Center(
child: Text("An error occured while opening bill PDF"),
)),
upvote if you find useful
Related
here's my code and i want a fullscreen image with a centerd button but i won't get that result , screenshot of app in below the code
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kings of Iran',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WelcomePage(),
);
}
}
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"),
fit: BoxFit.cover,
alignment: Alignment.center)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
)
],
),
),
);
}
}
and this is the result
How can I make this image fullscreen and button centered?
You can use Stack for display image and display button at center of the screen.
Stack : https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the center.
Example :
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"), fit: BoxFit.cover, alignment: Alignment.center))),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
Center(child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
))
],
),
],
)
}
}
Just add width: MediaQuery.of(context).size.width in Container
I want to floating action button is front of the alert dialog, I tried add elevation to floatingactionbutton and alertdialog but still not working. is it possible to make floatingactionbutton overlapping all layout including alertdialog?
this my alertdialog using lib rflutter_alert
var alertStyle = AlertStyle(
// animationType: AnimationType.fromTop,
alertElevation: 1,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontSize: textBody3),
descTextAlign: TextAlign.center,
titleStyle: TextStyle(
color: Colors.red,
fontSize: textHeader1,
fontWeight: FontWeight.bold),
alertAlignment: Alignment.center,
);
Alert(
context: context,
style: alertStyle,
content: Column(
children: <Widget>[
const SizedBox(
height: 30,
),
Text(msg),
const SizedBox(
height: 30,
),
Text(jam)
],
),
buttons: [
DialogButton(
child: Text(
"OK",
style: TextStyle(color: Colors.white, fontSize: textButton1),
),
onPressed: () => Navigator.pop(context),
color: Palette.color_primary,
radius: BorderRadius.circular(0.0),
),
],
image: flag == "OK"
? Image.asset(
"assets/images/success.png",
height: 50,
width: 50,
)
: Image.asset(
"assets/images/error.png",
height: 50,
width: 50,
),
).show();
and this the floatingactionbutton using lib DraggableFab
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: DraggableFab(
child: FloatingActionButton.extended(
elevation: 10,
onPressed: () {
getLocation();
},
label:ValueListenableBuilder(
valueListenable: notifierLocFab,
builder: (BuildContext context, bool value,Widget? child) {
return Column(
children: [
Text(latitudeFab.toStringAsFixed(7)),
Text(longitudeFab.toStringAsFixed(7)),
],
);
}),
),
),
);
}
I am trying to add to an array list after user clicked. I am using InkWell, onTap function.
child: InkWell(
onTap: () {
if (tempArray.contains(entries[index].toString())) {
tempArray.remove(entries[index].toString());
print(tempArray.toList().toString());
} else {
tempArray.add(entries[index].toString());
print(tempArray.toList().toString());
}
My debug console is printing these out,
enter image description here
However, when i put the codes inside a setState, this is what got printed
child: InkWell(
onTap: () {
setState(() {
if (tempArray.contains(entries[index].toString())) {
tempArray.remove(entries[index].toString());
print(tempArray.toList().toString());
} else {
tempArray.add(entries[index].toString());
print(tempArray.toList().toString());
}
});
enter image description here
What i am trying to do, is to show/hide the 'trailing' icon in the ListTile, based on whatever user had selected the particular item.
My full codes (without the setState) are as follows,
import 'package:flutter/material.dart';
class Personal1Redo extends StatefulWidget {
#override
_Personal1RedoState createState() => _Personal1RedoState();
}
class _Personal1RedoState extends State<Personal1Redo> {
#override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
List<String> entries = [
'Residental Loan',
'Personal Loan',
'Car Loan',
'Renovation Loan',
'Savings Account',
];
List<String> tempArray = [];
final heading = Column(
children: [
const SizedBox(
height: 40,
),
SizedBox(
height: (mediaQuery.size.height - mediaQuery.padding.top) * 0.1,
child: const Align(
alignment: Alignment.center,
child: Text(
'What do you aspire to do?',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
),
const SizedBox(
height: 20,
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('Borrower redo'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
heading,
ListView.builder(
shrinkWrap: true,
itemCount: entries.length,
itemBuilder: (ctx, index) {
return Container(
width: mediaQuery.size.width * 0.9,
padding: const EdgeInsets.all(15),
child: InkWell(
onTap: () {
if (tempArray.contains(entries[index].toString())) {
tempArray.remove(entries[index].toString());
print(tempArray.toList().toString());
} else {
tempArray.add(entries[index].toString());
print(tempArray.toList().toString());
}
},
child: Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: ListTile(
title: Text(
entries[index],
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 20,
),
textAlign: TextAlign.center,
),
trailing: tempArray.contains(entries[index])
? Icon(Icons.check_box_outline_blank_outlined)
: null,
),
),
),
);
})
],
),
),
);
}
}
Any helps and guidance is very much appreciated, thanks!!
Define variables and functions outside build method.
As setState method, calls build, every time it is called.
Like this :
import 'package:flutter/material.dart';
class Personal1Redo extends StatefulWidget {
#override
_Personal1RedoState createState() => _Personal1RedoState();
}
class _Personal1RedoState extends State<Personal1Redo> {
List<String> entries = [
'Residental Loan',
'Personal Loan',
'Car Loan',
'Renovation Loan',
'Savings Account',
];
List<String> tempArray = [];
getHeadingWidget(BuildContext context) {
return Column(
children: [
const SizedBox(
height: 40,
),
SizedBox(
height: (mediaQuery!.size.height - mediaQuery.padding.top) * 0.1,
child: const Align(
alignment: Alignment.center,
child: Text(
'What do you aspire to do?',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
),
const SizedBox(
height: 20,
),
],
);
}
#override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Borrower redo'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
getHeadingWidget(context),
ListView.builder(
shrinkWrap: true,
itemCount: entries.length,
itemBuilder: (ctx, index) {
return Container(
width: mediaQuery.size.width * 0.9,
padding: const EdgeInsets.all(15),
child: InkWell(
onTap: () {
if (tempArray.contains(entries[index].toString())) {
tempArray.remove(entries[index].toString());
print(tempArray.toList().toString());
} else {
tempArray.add(entries[index].toString());
print(tempArray.toList().toString());
}
},
child: Card(
margin: const EdgeInsets.all(10),
elevation: 8,
child: ListTile(
title: Text(
entries[index],
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 20,
),
textAlign: TextAlign.center,
),
trailing: tempArray.contains(entries[index])
? Icon(Icons.check_box_outline_blank_outlined)
: null,
),
),
),
);
})
],
),
),
);
}
}
I've created a screen where I can use a button to open the camera and take video. And above that button, I made a container to display the video. But I want to show this container containing video to display on the next page. As I am new to flutter, I believe my code is messy. Can you help me with how to do this?
And how to show multiple videos on a screen after taking them through this camera in a loop like this image here?
Here is my code -
class video_record02 extends StatefulWidget {
final Function? onSelectVideo;
const video_record02({Key? key, this.onSelectVideo});
#override
_video_record02State createState() => _video_record02State();
}
class _video_record02State extends State<video_record02> {
String dropdownValue = 'Bedroom';
File? storedVideo;
Future<void> _takeVideo() async {
final picker = ImagePicker();
final videoFile = await picker.pickVideo(
source: ImageSource.camera,
preferredCameraDevice: CameraDevice.rear,
maxDuration: Duration(
seconds: 25,
),
);
if (videoFile == null) {
return;
}
final rlyvideoFile = File(videoFile.path);
setState(() {
storedVideo = rlyvideoFile;
});
final appDir = await syspaths.getApplicationDocumentsDirectory();
final fileName = path.basename(rlyvideoFile.path);
final savedVideo = await rlyvideoFile.copy('${appDir.path}/$fileName');
widget.onSelectVideo?.call(savedVideo);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Center(
child: ListView(
shrinkWrap: true,
children: [
Column(
children: [
Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(
width: 0.5,
color: Colors.grey,
),
),
child: storedVideo != null
? VideoWidget(storedVideo!)
: Text(
'No Video Taken',
textAlign: TextAlign.center,
),
alignment: Alignment.center),
Align(
alignment: Alignment.center,
child: Column(
children: [
IconButton(
icon: Icon(Icons.play_circle_fill),
color: Colors.red,
iconSize: 100.0,
onPressed: _takeVideo,
),
],
),
),
Text(
'Click to start',
style: TextStyle(
fontSize: 25.0,
color: Colors.red,
fontWeight: FontWeight.w300,
),
),
Container(
margin: EdgeInsets.fromLTRB(125, 0, 125, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: TextButton(
child: Text(
'< Back',
style: TextStyle(fontSize: 17, color: Colors.black),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => video_record01()),
);
},
),
),
],
),
],
),
),
),
);
}
}
File profileImg;
Widget profilePic() {
return Stack(
children: <Widget>[
new Image.file(profileImg),
Positioned(
left: 50.0,
right: 50.0,
bottom: 40.0,
height: 64.0,
child: RaisedGradientButton(
onPressed: () async {
File image= await ImagePicker.pickImage(source:ImageSource.gallery);
image=profileImg;
print(image.path);
},
child: new Text(
"Upload",
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
gradient: LinearGradient(
colors: <Color>[
const Color(0xFF000000),
const Color(0xFF000000),
const Color(0xFF40079B)
],
),
), // child widget
),
]);
}
I have created one image and at the bottom of the image i have one button to select image from the gallery.Before selecting the image from gallery i want to set background color for the image after selecting the image from gallery i want to set the selected image in the imageview
A Minimal Example Of Using Image_picker & FutureBuilder for showing the picked Gallery Image.
Future<File> profileImg;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Gallery Image Picker"),
),
body: profilePic());
}
Widget profilePic() {
return ListView(children: <Widget>[
FutureBuilder(
builder: (context, data) {
if (data.hasData) {
return Container(
height: 200.0,
child: Image.file(
data.data,
fit: BoxFit.contain,
height: 200.0,
),
color: Colors.blue,
);
}
return Container(
height: 200.0,
child: Image.network('https://via.placeholder.com/150'),
color: Colors.blue,
);
},
future: profileImg,
),
RaisedButton(
color: Colors.blue,
onPressed: () {
profileImg = ImagePicker.pickImage(source: ImageSource.gallery)
.whenComplete(() {
setState(() {});
});
},
child: new Text(
"Pick Gallery Image",
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
),
]);
}