[英]How to Take Screenshot of the current Widget? : Flutter
我正在嘗試截取當前小部件的屏幕截圖並希望將其存儲在圖庫中,但在整個 web 中我沒有得到想要的問題答案。
這些是我目前正在使用的包。
flip_card: ^0.5.0
screenshot:
我有我的 Quotes 小部件,它包裹在 flip_card Package 小部件中,
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: DefaultAssetBundle.of(context).loadString("jsons/quotes.json"),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: SizedBox(
child: CircularProgressIndicator(),
height: 60.0,
width: 60.0,
),
),
); // I understand it will be empty for now
} else {
var myquotes = json.decode(snapshot.data.toString());
int lengthofJSON = 1643;
var rangeofQuotes = random(0, lengthofJSON);
//var randomMyQuotes = myquotes[0].shuffle().first;
return FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Screenshot(
controller: screenshotquotes,
child: Card(
// color: Colors.transparent,
child: GradientCard(
gradient: Gradients.buildGradient(
Alignment.topRight, Alignment.bottomLeft, [
Colors.blueAccent[700],
Colors.blue,
Colors.blueAccent[100],
// Colors.black54,
// Colors.black87,
// Colors.black87,
]),
semanticContainer: false,
child: Wrap(
children: [
Center(
child: Column(
children: [
Padding(
padding: EdgeInsets.all(
MediaQuery.of(context).size.width / 20)),
Container(
child: Icon(CarbonIcons.quotes,
color: Colors.white)),
Container(
padding: EdgeInsets.all(
MediaQuery.of(context).size.width / 30),
child: Text(
"${myquotes[rangeofQuotes]["text"]}",
style: TextStyle(
color: Colors.white,
fontSize: (myquotes[rangeofQuotes]
["text"]) //161
.length >
90
? 12
: 16))),
Container(
padding: EdgeInsets.all(
MediaQuery.of(context).size.width / 30),
child: Text(
"@${myquotes[rangeofQuotes]["author"]}",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontStyle: FontStyle.italic)))
],
),
),
],
),
),
),
),
在后面,我得到了一個 back: (widget) 來自 flip_card 小部件,看起來像這樣,
back: Card(
// color: Colors.transparent,
child: GradientCard(
gradient: Gradients.buildGradient(
Alignment.bottomRight, Alignment.topRight, [
Colors.blueAccent[700],
Colors.blue,
Colors.blue[400],
//Colors.blueAccent[700],
// Colors.white,
]),
semanticContainer: false,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(
MediaQuery.of(context).size.width / 30),
child: Text("Share or Download",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
))),
Row(
children: [
Expanded(
child: Align(
alignment: Alignment.center,
child: Center(
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: IconButton(
onPressed: () {},
icon: Icon(CarbonIcons.share),
),
)),
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: Center(
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: IconButton(
onPressed: () {
screenshotquotes
.capture()
.then((Uint8List image) async {
//Capture Done
setState(() {
_imageFile = image;
});
}).catchError((onError) {
print(onError);
});
print("Quote Captured");
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
backgroundColor: Colors.blue[200],
content: Row(
children: [
Expanded(
flex: 1,
child: Text("👍",
style: TextStyle(
color: Colors
.white))),
Expanded(
flex: 5,
child: Text(
"Quotes, is captured sucessfully",
)),
// FlatButton(
// child: Text("Undo"),
// color: Colors.white,
// onPressed: () async{
// await box.deleteAt(index);
// Navigator.pop(context);
// },
// ),
],
)));
},
icon: Icon(CarbonIcons.download),
),
)),
),
),
],
)
],
),
),
),
),
);
}
});
}
random(min, max) {
var rn = new Random();
return min + rn.nextInt(max - min);
}
}
從所有這些中,我既沒有在我的應用程序的內部文件夾中獲得截圖圖像com.example.tooodo
,我也沒有在畫廊中得到任何東西。
我想在這方面尋求你的關注。 謝謝你,願你登峰造極。
您可以使用 RepaintBoundary Class,例如將 Widget 包裝在 RepaintBoundary Class 中,如下所示: return Scaffold( appbar:AppBar(), body:Container( child: RepaintBoundary( key: _repaintKey, child:Stack()) ));
不要忘記給 RepaintBoundary 像
GlobalKey _repaintKey = new GlobalKey();
現在您可以在 RepaintBoundary 中捕獲該部分
Future<Uint8List> captureBoundary() async {
try {
RenderRepaintBoundary boundary =
_repaintKey.currentContext.findRenderObject();
Image savedImage = await boundary.toImage(pixelRatio: 3.0);
ByteData byteData =
await savedImage.toByteData(format: ImageByteFormat.png);
UInt8List pngBytes = byteData.buffer.asUint8List();
saveFile(widget.pickedImage.uri.path, pngBytes);
return pngBytes;
} catch (e) {
print(e);
}
}
在這里,調用 saveFile() 將捕獲的圖像保存到手機存儲中,並在 saveFile 內部
Future<bool> saveFile( var byteList) async {
Directory storageDir;
try {
if (await requestPermission(Permission.storage)) {
storageDir = await getExternalStorageDirectory();
String newPath = '';
List<String> folders = storageDir.path.split('/');
for (int x = 1; x < folders.length; x++) {
String folder = folders[x];
if (folder != 'Android') {
newPath += '/' + folder;
} else {
break;
}
}
newPath = newPath + '/yourFolderName';
storageDir = Directory(newPath);
} else {
if (await requestPermission(Permission.photos)) {
storageDir = await getTemporaryDirectory();
} else {
return false;
}
}
if (!await storageDir.exists()) {
await storageDir.create(recursive: true);
}
if (await storageDir.exists()) {
File savedFile = File(storageDir.path + "/yourfileName");
String savedPath = storageDir.path + "/yourfileName";
savedFile.writeAsBytesSync(byteList); //the byteList that you send from captureBoundary
if (savedPath != null) {
print("File saved");
} else {
print("Error saving");
}
return true;
}
} catch (e) {
print(e);
}
return false;
}
希望,這會有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.