0

使用颤振,我正在尝试建立一个语言列表,在 listtile 的末尾我需要选择语言的圆形复选框。点击文本或复选框上的任意位置应显示启用状态,再次点击应禁用它。我不确定如何分别处理每个复选框的状态。我也尝试使用 CheckBoxListTile,但我不确定如何实现我想要的。有人可以提供任何例子吗?

在这里查看我的图片

`

import 'package:basic_utils/basic_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:pankaj_app/config.dart';
import 'package:pankaj_app/model/LanguageModel.dart';
import 'package:shared_preferences/shared_preferences.dart';


class ChooseLanguage extends StatefulWidget {
  ChooseLanguage({Key key, this.language}) :super(key: key);
  List<LanguageModel> language;
  @override
  _ChooseLanguageState createState() => _ChooseLanguageState();
}

class _ChooseLanguageState extends State<ChooseLanguage> {
  int languageIndex = 0;
  bool _isSelected = false;

  @override
  void initState() {

    super.initState();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(AppStrings.language)),
      backgroundColor: Color(0xFFfbf5e7),
      resizeToAvoidBottomPadding: false,

      body: Container(child: Container(
          padding:EdgeInsets.all(5),
          child:new Center( 
            child: new FutureBuilder<List<LanguageModel>>(
            future: getlanguage(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
               if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                //shrinkWrap: true,
                itemCount: snapshot.data.length,
                itemBuilder: ((context, index) => languageList(
                      list: snapshot.data,
                      index: index,
                    )));
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
              }else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),

        ),
        ),
        ),

     bottomNavigationBar:BottomAppBar(
       child: Container(
         color: Colors.transparent,
         width: MediaQuery.of(context).size.width,
         height: 60,
         child: FlatButton(
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(0),
             side: BorderSide(color: Colors.blueAccent)),
             color: Colors.purpleAccent,
             textColor: Colors.white,
             padding: EdgeInsets.all(8.0),
             onPressed: () {},
             child: Text("Continue".toUpperCase(),
             style: TextStyle(
             fontSize: 14.0,),),),)
    ),
    );
  }

  Widget languageList({List<LanguageModel> list, int index}){
      return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
            padding: EdgeInsets.all(0),
            child: Ink(
            color: _isSelected ? Colors.blue : Colors.transparent,
            child: new ListTile(
                dense: false,

                title: new Text(list[index].language,
                style: new TextStyle(
                  fontWeight: FontWeight.w600, 
                  fontSize: 16.0,
                  color: Colors.deepPurple),),
                  // trailing: new Row(
                  //   children: <Widget>[
                  //     new Checkbox(
                  //       value: list[index].isCheck, onChanged: (bool value) {
                  //       setState(() {
                  //         list[index].isCheck = value;
                  //       });
                  //     })
                  //   ],
                  // )

                  // GestureDetector(
                  //   child: _isSelected
                  //         ? Icon(
                  //             Icons.favorite,
                  //             color: Colors.red,
                  //           )
                  //         : Icon(
                  //             FontAwesomeIcons.heart,
                  //             color: null,
                  //           ),
                      onTap: () {
                        if(_isSelected){
                          setState(() {
                            _isSelected = true;
                          });
                        }
                      }
                  //       if (!_isSelected) {
                  //         setState(() {
                  //           _isSelected = true;
                  //         });
                  //         // saveLikeValue(_isLiked);
                  //         // postLike(list[index].reference, currentUser);
                  //       } else {
                  //         setState(() {
                  //           _isSelected = false;
                  //         });
                  //         //saveLikeValue(_isLiked);
                  //         // postUnlike(list[index].reference, currentUser);
                  //       }
                  //     }),


              ),),
            ),

        ],);



  }


}

`

4

1 回答 1

0

材料设计没有圆形复选框小部件,您可以为此使用circular_check_box

于 2020-05-28T11:47:31.173 回答