Android Studio 如何在flutter中创建一个这样的自定义复选框按钮

np8igboo  于 2023-02-24  发布在  Android
关注(0)|答案(2)|浏览(142)

Image here
我尝试了很多,但我可以做到这一点,我不小心删除了我的代码,如果有人能帮助,我很高兴。

h5qlskok

h5qlskok1#

Row(
                         children: [
                             section(
                                 text: 'Small',
                                 price: 4.99,
                                 bgcolor: Colors.white,
                                textColor: Colors.black,
                                priceColor: Colors.green),
                            const SizedBox(width: 10),
                            section(
                                text: 'Medium',
                                price: 4.99,
                                bgcolor: Colors.red,
                                textColor: Colors.white,
                                priceColor: Colors.white),
                            const SizedBox(width: 10),
                            section(
                                text: 'Large',
                                price: 4.99,
                                bgcolor: Colors.white,
                                textColor: Colors.black,
                                priceColor: Colors.green),
                             const SizedBox(width: 10),
                           ],
                        )

 Expanded section(
      {required String text,
      required double price,
      required Color bgcolor,
      required Color textColor,
      required Color priceColor}) {
    return Expanded(
        child: Container(
      height: 50,
      color: bgcolor,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            text,
            style: TextStyle(color: textColor),
          ),
          const SizedBox(height: 10),
          Text(
            '\$$price',
            style: TextStyle(color: priceColor),
          ),
        ],
      ),
    ));
  }
slwdgvem

slwdgvem2#

这是一个示例,如果需要,您可以对其进行改进

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var plans = <Plan>[];
  Plan? selectedPlans;

  @override
  initState() {
    super.initState();
    initPlans();
  }

  initPlans() {
    plans.add(Plan(name: 'Small', price: 4.99));
    plans.add(Plan(name: 'Medium', price: 8.99));
    plans.add(Plan(name: 'Large', price: 13.99));
  }

  togglePlans(index) {
    for (var i = 0; i < plans.length; i++) {
      plans[i].selected = false;
    }
    plans[index].selected = true;
    selectedPlans = plans[index];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
          child: Scaffold(
        backgroundColor: const Color(0xffF1DCC4),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(
              plans.length,
              (index) => InkWell(
                onTap: () {
                  togglePlans(index);
                  setState(() {});
                },
                child: PlanCard(
                  plan: plans.elementAt(index),
                ),
              ),
            ),
          ),
        ),
      )),
    );
  }
}

class PlanCard extends StatelessWidget {
  final Plan plan;
  const PlanCard({super.key, required this.plan});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      height: 70,
      width: 100,
      margin: const EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        color: plan.selected ? Colors.red : Colors.white,
        borderRadius: BorderRadius.circular(5),
      ),
      duration: const Duration(seconds: 1),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            plan.name,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 16,
              color: plan.selected ? Colors.white : Colors.black,
            ),
          ),
          const SizedBox(height: 5),
          Text(
            '${plan.price}\$',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 12,
              color: plan.selected ? Colors.white38 : Colors.green,
            ),
          )
        ],
      ),
    );
  }
}

class Plan {
  String name;
  double price;
  bool selected;

  Plan({required this.name, required this.price, this.selected = false});
}

相关问题