preface
Flutter achieves a simple drawer effect.Copy the codeFirst, the effect picture:
First of all, the general structure of the project is as follows: Routing (Fluro) has been added, the first demo of the new project is drawer effect, and I will always add my own demo, which is also a note to communicate with everyone.
The effect is very simple, and my experience is that the parent component passes a callback function to the child component in order to call back the parent component when the child component is clicked to fulfill our business needs. The parent component passes the callback data directly to the child component’s constructor.
child: Column(
children: allSubject.map((e) {
return SubjectItem(
key: Key(e['id'].toString()),
callBack: clickBack,
showBottm: e['showBottm'].name: e['subject_name'].id: e['id']); }).toList(), ),Copy the codeThe callback function is:
clickBack(bool flag, int id) {
var tmp = [];
for (int i = 0; i < allSubject.length; i++) {
if (allSubject[i]['id'] == id) {
var item = allSubject[i];
if (flag == true) {
item['showBottm'] = true;
} else {
item['showBottm'] = false;
}
tmp.add(item);
} else {
tmp.add(allSubject[i]);
}
}
setState(() {
allSubject = tmp;
});
}
Copy the codeHandling the show-and-hide effects of each drawer in the parent component’s callback function fits the business requirements of our parent and child components.
In the child component we bind the click event to call the parent component’s callback method. Here is the child component:
click() async {
if (widget.showBottm == true) {
widget.callBack(false,widget.id);
}else{
widget.callBack(true,widget.id); }}Copy the codeAll subcomponent contents:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:flutter_study/pages/widgets/radius_circle.dart';
import 'load_image.dart';
class SubjectItem extends StatefulWidget {
final int id;
final String name;
final bool showBottm;
final Function callBack;
SubjectItem({Key key, this.id, this.name, this.showBottm=false.this.callBack}) : super(key: key);
@override
_SubjectItemState createState() {
return_SubjectItemState(); }}class _SubjectItemState extends State<SubjectItem> {
// bool showBottm = false;
List panelData = [{'level':1.'result':'results'.'score':'0'}, {'level':2.'result':'results'.'score':'1'}, {'level':3.'result':'results'.'score':'0'}, {'level':1.'result':'results'.'score':'2'},];
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
click() async {
if (widget.showBottm == true) {
widget.callBack(false,widget.id);
}else{
widget.callBack(true,widget.id);
}
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: double.infinity,
child: Column(
children: [
GestureDetector(
onTap: () {
click();
},
child: Container(
width: double.infinity,
// height: ScreenUtil().setHeight(100),
padding: EdgeInsets.symmetric(
horizontal: 10.vertical: ScreenUtil().setHeight(30)),
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: new Border.all(
color: Color(0xFFA0AACD).withOpacity(0.1), // Border color
width: 1.// Frame width
), // Edge color and edge width
color: Colors.white, / / the base
boxShadow: [
BoxShadow(
blurRadius: 3.// Shadow range
spreadRadius: 0.1.// Shadow concentration
color: Color(0xFFA0AACD).withOpacity(0.1), // Shadow color),,),child: Column(children: [
Row(
children: [
RadiusCircle(
color: Colors.black,
),
SizedBox(
width: 10,
),
Text(
widget.name,
style: TextStyle(
fontSize: ScreenUtil().setSp(28),
color: Colors.black,
fontWeight: FontWeight.w500),
),
Expanded(
child: Container(),
),
widget.showBottm == true
? LoadAssetImage(
'shang'.width: ScreenUtil().setWidth(20),
)
: LoadAssetImage('xia'.width: ScreenUtil().setWidth(20))
],
),
Visibility(
visible: widget.showBottm == true.child: Container(
child: Column(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 15),
color: Colors.white,
width: double.infinity,
height: ScreenUtil().setHeight(90),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'用时'.style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28)),
),
Text(
'scores'.style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28)),
)
],
),
),
panelData.length==0? Container( child: Text('No data'.style: TextStyle(color: Colors.grey),),
):
Column(
children: panelData.map((e) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 15),
color: e['level'] = =1
? Color(0xFF54D060).withOpacity(0.2)
: (e['level'] = =2
? Color(0xFFFFC21E).withOpacity(0.2)
: (e['level'] = =3
? Color(0xFFFF6638).withOpacity(0.2)
: Color(0xFFFF2B2B)
.withOpacity(0.2))),
width: double.infinity,
height: ScreenUtil().setHeight(90),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
e['result']????'no'.style: TextStyle(
color: e['level'] = =1
? Color(0xFF54D060)
: (e['level'] = =2
? Color(0xFFFFC21E)
: (e['level'] = =3
? Color(0xFFFF6638)
: Color(0xFFFF2B2B))),
fontSize: ScreenUtil().setSp(28)),
),
Text(
(e['score']????'no').toString(),
style: TextStyle(
color: e['level'] = =1
? Color(0xFF54D060)
: (e['level'] = =2
? Color(0xFFFFC21E)
: (e['level'] = =3
? Color(0xFFFF6638)
: Color(0xFFFF2B2B))),
fontSize: ScreenUtil().setSp(28() [() [() [() }).toList(), ) ], ), ), ) ])), ), ], ), ); }}Copy the codeWelcome to learn and share flutter with me
Github address of this project: project address
Here is our public account: Flutter Programming Notes (Code9871) shares your thoughts on flutter learning from time to timeCopy the code