lundi 23 mars 2020

Whats the efficient way to impliment a BottomModalSheet containing Multiple checkBoxTile in it

I've implemented A BottomModalSheet containing some checkBoxTile in it, but it seems kind of lagging. So I'm looking for a better way to Implement.

I've done it this way:-

showBottomSheetSwitch.dart

import 'package:flutter/material.dart';

class BottomSheetSwitch extends StatefulWidget {
  final String title;
  final bool switchValue;
  final ValueChanged valueChanged;

  BottomSheetSwitch({this.switchValue, this.valueChanged, this.title});

  @override
  _BottomSheetSwitchState createState() => _BottomSheetSwitchState();
}

class _BottomSheetSwitchState extends State<BottomSheetSwitch> {
  bool _switchValue;
  String _title;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _switchValue = widget.switchValue;
    _title = widget.title;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CheckboxListTile(
        title: Text(
          _title,
          style: TextStyle(
              color: Colors.black54, fontSize: 20, fontFamily: 'ProductSans'),
        ),
        activeColor: Colors.purple,
        value: _switchValue,
        onChanged: (value) {
          setState(() {
            _switchValue = value;
            widget.valueChanged(value);
          });
        },
      ),
    );
  }
}

here is the code where it's being called:-

floatingActionButton: FloatingActionButton(
        splashColor: Colors.deepPurple,
        onPressed: () => showModalBottomSheet(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    topRight: Radius.circular(15))),
            elevation: 5,
            context: context,
            builder: (BuildContext context) {
              return Container(
                  height: 300,
                  padding: EdgeInsets.all(20),
                  child: Column(
                    children: <Widget>[
                      BottomSheetSwitch(
                        title: "Gluten Free",
                        switchValue: _glutenFree,
                        valueChanged: (value) {
                          _glutenFree = value;
                        },
                      ),
                      BottomSheetSwitch(
                        title: "Lactose Free",
                        switchValue: _lactoseFree,
                        valueChanged: (value) {
                          _lactoseFree = value;
                        },
                      ),
                      BottomSheetSwitch(
                        title: "Vegan",
                        switchValue: _vegan,
                        valueChanged: (value) {
                          _vegan = value;
                        },
                      ),
                      BottomSheetSwitch(
                        title: "Vegetarian",
                        switchValue: _vegetarian,
                        valueChanged: (value) {
                          _vegetarian = value;
                        },
                      )
                    ],
                  ));
            }),
        child: Icon(Icons.filter_list),
      )

my problem is ,its working but its too lagging. i Don't know why.




Aucun commentaire:

Enregistrer un commentaire