This time, I plan to build the remaining 3 TAB pages. These pages are relatively simple. There is no need to pay attention to the place
Take the pamphlet page as an example to see the structure below can be divided into 3 parts
The left part is the preview of the cover of the booklet, and the middle part is the title, author’s name, rank, number of chapters, and number of readings. On the far right is the price and the general structure is:
Row(
children: [
Container(),
Column(
children: [
Text(),
Row(
children: [
Text(),
Text(),
]
)
],
Container(
child: Text(),
)
),
]
)
Copy the codeAll that’s left is to write styles. The other thing you need to choose in the release boiling point system album is wechat_assets_picker, videos and images can be selected. This library is integrated with github using Flutter_luban compression images as an example:
AssetPicker.pickAssets(context,
maxAssets: 1, pathThumbSize: 1, previewThumbSize: [1])
.then((List<AssetEntity> assets) async {
print(assets.first.file);
if (assets.length > 0) {
AssetEntity asset = assets.first;
File file = await asset.file;
print(file);
File image = file;
if (image == null) {
return;
}
CompressObject compressObject = CompressObject(
imageFile: image, //image
path: image.path,
quality: 50 //compress to path
);
Luban.compressImage(compressObject).then((_path) async {
}).catchError((onError) => {print(onError)});
}
Copy the codeIOS don’t forget to add permission request configuration to the info.plist file
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>Replace with your permission description.</string>
Copy the code
The idea is to use stack layout and offstage to show and hide
stack(
children: [
Positioned(
bottom: 0,
child: Offstage(
offstage: isShowLink,
child: InkWell(
onTap: () {
setState(() {
isShowLink = true;
});
},
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
child: Icon(
Icons.link_sharp,
size: 40,
color: Colors.blue,
),
),
),
)),
// Display the input box
Positioned(
bottom: 0, child: Offstage( offstage: ! isShowLink, child: Container( height:110,
width: Get.width,
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
margin: EdgeInsets.symmetric(
horizontal: 20, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.blue, width: 1)),
child: TextField(
autofocus: true,
onSubmitted: (value) {},
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 18),
hintText: 'Please enter link address',
),
style:
TextStyle(fontSize: 14, color: Colors.grey),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlatButton(
onPressed: () {
setState(() {
isShowLink = false;
});
},
child: Text('cancel')),
FlatButton(
onPressed: () {
setState(() {
isShowLink = false;
});
},
child: Text('complete'() () [() [() () [() () () [() () () [)Copy the codeOver ～～～～