大家好，我正在使用 Buttons 来自定义按钮，但我没有找到接近预期设计的方法。基本上，我想自定义1）具有灰色背景和黑色复选标记的多个复选框2）具有灰色的 RangeSlider 非活动栏3）具有黑色的单选按钮，我想取消全选，我知道单选按钮用户不能取消选择所有按钮，但我想取消选择所有有或没有单选按钮（任何不同的方式也可以）4）与第 3 点相同，但方形框带有灰色背景和黑色复选标记。我附上了我的代码和预期设计的屏幕截图，并粘贴了我的代码。请大家帮助我接近预期的设计，请随时发表评论以获得任何清晰。提前致谢。我想要什么 我的预期设计
我的结果 UI主文件
import 'package:filters2/filter_screen.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Dialog',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Filters'),
),
body: Center(
child: FlatButton(
onPressed: (){
filterBottomSheet();
},
color: Colors.green,
padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child: Text('Filters',style: TextStyle(fontSize: 16,color: Colors.white),),
),
),
);
}
filterBottomSheet(){
showModalBottomSheet(
context: context,
isScrollControlled: true,
isDismissible: true,
builder: (BuildContext context){
return Filters();
}
);
}
}
过滤器类
import 'package:filters2/Fruit_model_class.dart';
import 'package:filters2/color_model_class.dart';
import 'package:filters2/mobile_model_class.dart';
import 'package:flutter/material.dart';
class Filters extends StatefulWidget {
@override
_FiltersState createState() => _FiltersState();
}
class _FiltersState extends State<Filters> {
/*--------MobileList-multiple checklist-------*/
List<MobileList> availableMobiles = [
MobileList(id: 0, companyName: "Google", model: "Pixel 6 Pro"),
MobileList(id: 1, companyName: "Apple", model: "Iphone Xr"),
MobileList(id: 2, companyName: "Xiaomi", model: "Redmi note 10"),
];
List<MobileList> selectedMobiles = [];
/*------Price Range Selection-RangeSlider--------*/
RangeValues _currentRangeValues = const RangeValues(40000, 80000);
int minPrice = 20000;
int maxPrice = 90000;
/*Radio--fruits*/
String radioItem1 = 'Mango';
int fruitGroupId = 0;
List<FruitsList> fList = [
FruitsList(id: 0, name: "Mango",),
FruitsList(id: 1, name: "Apple",),
FruitsList(id: 2, name: "Banana",),
FruitsList(id: 3, name: "Cherry",),
];
/*Radio--Colors*/
String radioItem2 = 'Red';
int? colorGroupId ;
List<ColorsList> cList = [
ColorsList(id: 0, name: "Blue",),
ColorsList(id: 1, name: "Red",),
ColorsList(id: 2, name: "Green",),
ColorsList(id: 3, name: "Yellow",),
];
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.85,
decoration: BoxDecoration(
//olor: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10,),
Container(
child: Text("Filter",style: TextStyle(color: Colors.black, fontSize: 24,fontWeight: FontWeight.bold),),
),
SizedBox(height: 10,),
Container(
child: Text("Select Mobiles (multiple selection)",style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),),
),
SizedBox(height: 10,),
Divider(),
Container(
child: Row(
children: [
Expanded(
flex:1,
child: ListView.builder(
shrinkWrap: true,
itemCount: availableMobiles.length,
itemBuilder: (context, playerIndex){
return CheckboxListTile(
controlAffinity: ListTileControlAffinity.trailing,
contentPadding: EdgeInsets.zero,
title:Text(availableMobiles[playerIndex].companyName),
value: selectedMobiles.contains(availableMobiles[playerIndex]),
onChanged: (value) {
if(selectedMobiles.contains(availableMobiles[playerIndex])){
selectedMobiles.remove(availableMobiles[playerIndex]);
}
else {
selectedMobiles.add(availableMobiles[playerIndex]);
}
setState(() {
});
}
);
}
),
),
Expanded(
flex: 2,
child:Container(
color: Colors.white ,
) ),
],
),
),
SizedBox(height: 10,),
Divider(),
Container(
child: Text("Year",style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),),
),
SizedBox(height: 10,),
Divider(),
Container(
child: Row(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Align(
alignment: Alignment.centerLeft,
child: Text("20000",style: TextStyle(color: Colors.black, fontSize: 20)),
),
Expanded(
child: RangeSlider(
values: _currentRangeValues,
min: minPrice.toDouble(),
max: maxPrice.toDouble(),
divisions: maxPrice - minPrice,
activeColor: Colors.black,
labels: RangeLabels(
_currentRangeValues.start.round().toString(),
_currentRangeValues.end.round().toString(),
),
onChanged: (RangeValues values) {
setState(() {
_currentRangeValues = values;
});
},
),
),
Align(
alignment: Alignment.centerRight,
child: Text("90000",style: TextStyle(color: Colors.black, fontSize: 20))),
],
),
),
SizedBox(height: 10,),
Divider(),
Container(
child: Row(
children: [
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Fruits (Single selection)",style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),),
Column(
children:
fList.map((data) => RadioListTile(
controlAffinity: ListTileControlAffinity.trailing,
contentPadding: EdgeInsets.zero,
title: Text("${data.name}"),
groupValue: fruitGroupId,
value: data.id,
onChanged: (val){
setState(() {
radioItem1 = data.name;
fruitGroupId = data.id;
});
},
)).toList(),
),
],
),
),
Expanded(
flex:2,
child: Container(
//width: 5,
color: Colors.white,
)),
],
),
),
Container(
child: Row(
children: [
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Colors",style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),),
Column(
children:
cList.map((colorData) => RadioListTile(
controlAffinity: ListTileControlAffinity.trailing,
contentPadding: EdgeInsets.zero,
title: Text("${colorData.name}"),
groupValue: colorGroupId,
value: colorData.id,
onChanged: (val){
setState(() {
radioItem2 = colorData.name;
colorGroupId = colorData.id;
});
},
)).toList(),
),
],
),
),
Expanded(
flex: 2,
child:Container(
color: Colors.white ,
) ),
],
),
),
],
),
),
);
}
}
mobile_model_class
class MobileList {
int id;
String companyName;
String model;
MobileList({required this.id, required this.companyName, required this.model});
}
Fruit_model_class
class MobileList {
int id;
String companyName;
String model;
MobileList({required this.id, required this.companyName, required this.model});
}
color_model_class
class ColorsList {
String name;
int id;
ColorsList({required this.name,required this.id});
}