preface

Flutter achieves a simple drawer effect.Copy the code

First, 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 code

The 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 code

Handling 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 code

All 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 code

Welcome 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