This article mainly focuses on the content structure and effect realization of the article details interface of nuggets APP, which is also the end of the article. Or interested students can talk about which page or function they want to realize. Progress together. A person after all no group of people will go far.
The title section
Then, the left part is a return button, and the right part is a suspension window to pop up sharing. The middle part is changed according to the sliding of the content list. The general idea is to build the middle part through pageView, and forbid gesture sliding. Using the active trigger slide effect, the trigger mechanism is the content slide to change the distance effect as follows:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class DetailPage extends StatefulWidget {
DetailPage({Key key}) : super(key: key);
@override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
PageController controller = new PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
width: Get.width,
height: 80,
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(
top: Get.context.mediaQueryPadding.top, left: 10, right: 10),
child: Row(
children: [
InkWell(
child: Icon(
CupertinoIcons.back,
color: Color.fromRGBO(38.38.40.1),
),
onTap: () {
print('Hit back');
Get.back();
},
),
Expanded(
child: PageView.builder(
itemBuilder: (context, index) {
if (index == 0) {
return Container(
alignment: Alignment.center,
child: Text('Step by step Development of Flutter Application - Nuggets Article Details page')); }return Container(
child: Row(
children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10() [() [() [() }, itemCount:2,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
controller: controller,
)),
InkWell(
child: Icon(
Icons.list,
color: Color.fromRGBO(38.38.40.1),
),
onTap: () {
controller.animateTo(40,
duration: Duration(milliseconds: 500), curve: Curves.ease); },),],),),); }}Copy the codeWith this in mind, do the following
Content section construction
This section wants to know what the return format of nuggets content is, whether it is Markdown content or HTML content, if it is HTML content portal, you can refer to it. Effect:
flutter_markdown: ^0.52.
Copy the codeAdd the detail content code to the above code
ScrollController _scrollController = new ScrollController();
@override
void initState() {
super.initState(); _scrollController .. addListener(() { setState(() {if (_scrollController.offset > 88 && _scrollController.offset < 100) {
controller.animateTo(30,
duration: Duration(milliseconds: 500), curve: Curves.ease);
} else if (_scrollController.offset <= 0) {
controller.animateTo(0,
duration: Duration(milliseconds: 500), curve: Curves.ease); }}); }); }@overrideWidget build(BuildContext context) { ... Omit the above code//_markdownData is the content constant
Expanded(
child: Markdown(
data: _markdownData,
controller: _scrollController,
))
}
Copy the codeSuspension of pop-ups
Use getX’s Get. Dialog to display the pop-up effect:
The code is as follows:
renderItem(title) {
return Column(
children: [
Container(
height: 40,
width: 40,
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
color: Colors.red, borderRadius: BorderRadius.circular(20)),
),
Padding(padding: EdgeInsets.only(top: 8)),
Material(
child: Text(title),
)
],
);
}
// Call the method
Get.dialog(
UnconstrainedBox(
alignment: Alignment.bottomCenter,
child: Container(
width: Get.width,
height: Get.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20))),
child: Column(
children: [
Padding(padding: EdgeInsets.only(top: 40)),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
renderItem('Card Sharing'),
renderItem('Wechat Sharing'),
renderItem('Moments to Share'),
renderItem('Microblog Sharing'),
],
),
Padding(padding: EdgeInsets.only(top: 20)),
Divider(
height: 2,
color: Colors.grey,
),
Padding(padding: EdgeInsets.only(top: 20)),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
renderItem('Card Sharing'),
renderItem('Wechat Sharing'),
renderItem('Moments to Share'),
renderItem('Microblog Sharing'),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
renderItem('Card Sharing'),
renderItem('Wechat Sharing'),
renderItem('Moments to Share'),
renderItem('Wechat Sharing'),
],
),
Expanded(child: Container()),
GestureDetector(
onTap: () {
Get.back();
},
child: Container(
margin: EdgeInsets.only(
bottom: Get
.context.mediaQueryPadding.bottom),
width: Get.width,
height: 40,
alignment: Alignment.center,
child: Material(
child: Text(
'cancel',
),
),
),
),
],
)),
),
useRootNavigator: false,
useSafeArea: false);
Copy the codeOver ～～～～