dart 在自己的按钮类中添加边框和文本

ffvjumwh  于 2023-06-19  发布在  其他
关注(0)|答案(3)|浏览(133)

bounty将在2小时后到期。此问题的答案有资格获得+50声望奖励。Test正在寻找一个答案从一个有信誉的来源

我有个问题我想在图标下面添加文本,并添加一个带背景的边框。我该怎么做?
我不知道如何在边框内添加带有背景的文本。最好的选择是什么?

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../utils/definitions.dart';
import 'icons.dart';
import '../model/label.dart';

class LabelButton extends IconButton {
  final Label? label;

  //counter feedback!

  LabelButton(
      {required this.label, required VoidStringCallback? process, Key? key})
      : super(
            key: key,
            icon: Icon(iconList
                .firstWhere((element) => element.name == label!.uiIcon)
                .icon),
            iconSize: 80,
            onPressed: () {
              process!(label!.name);
              HapticFeedback.lightImpact();
            });
  const LabelButton._(this.label, {Key? key})
      : super(key: key, icon: const Icon(null), onPressed: null);
  static LabelButton createBlank() {
    return const LabelButton._(null);
  }
}

我尝试的是:
我试图改变这一点与ElevatedButton,我可以使用一个背景和标签。

class LabelButton extends ElevatedButton {
  final Label? label;

  //counter feedback!

  LabelButton(
      {required this.label, required VoidStringCallback? process, Key? key})
      : super(
            key: key,
            icon: Icon(iconList
                .firstWhere((element) => element.name == label!.uiIcon)
                .icon),
            iconSize: 80,
            label: Text('Test'),
            child: ,
            onPressed: () {
              process!(label!.name);
              HapticFeedback.lightImpact();
            });

  const LabelButton._(this.label, {Key? key})
      : super(key: key, icon: const Icon(null), onPressed: null);

  static LabelButton createBlank() {
    return const LabelButton._(null);
  }
}
ecbunoof

ecbunoof1#

试试下面的代码

@override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
          side: BorderSide(width: 2.0, color: Colors.black),
        ),
        padding: EdgeInsets.all(16.0),
        primary: Colors.blue, // Change the background color as needed
      ),
      onPressed: () {
        process!(label!.name);
        HapticFeedback.lightImpact();
      },
      child: Column(
        children: [
          Icon(
            iconList
                .firstWhere((element) => element.name == label!.uiIcon)
                .icon,
            size: 80,
          ),
          SizedBox(height: 8.0),
          Text(
            'Your Text Here',
            style: TextStyle(fontSize: 16.0),
          ),
        ],
      ),
    );
  }
fjnneemd

fjnneemd2#

您可以创建自己的自定义按钮并对其进行自定义。

class CustomButton extends StatelessWidget {
  final VoidCallback? onPress;
  final String? title;
  final Color borderColor;

  const CustomButton({
    Key? key,
    this.onPress,
    this.title,
    this.borderColor = Colors.blue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPress,
      child: Container(
        height: 40,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          image: const DecorationImage(
              image: AssetImage('assets/bg.png'), fit: BoxFit.fill),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: borderColor),
        ),
        child: Center(
          child: Text(
            title!,
            style: const TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

如果您想要一个带有文本的图标,请将Text替换为RowColumn,并添加一个Icon小部件。
下面是一个例子:

Row(
          children: [
            const Icon(Icons.radio_button_checked),
            Text(title!),
          ],
        )

你需要的时候就这样用。

CustomButton(
    onPress: (){},
    title: "Button Title",
    borderColor: Colors.green
)

不要忘记像这样导入类。

import '../../res/shared_widgets/custom_button.dart';
2ic8powd

2ic8powd3#

import 'package:flutter/material.dart';
import 'package:workspace/base/extension/context_extension.dart';

class BorderIconContainer extends StatelessWidget {
  Color? borderColor;
  String text;
  Color? textColor;
  Color? bgColor;
  Color? iconColor;
  double dynamicHeight;
  double dynamicWidth;
  double? iconSize;
  IconData icon;
  VoidCallback onTap;

  BorderIconContainer({
    super.key,
    this.iconColor,
    required this.onTap,
    required this.icon,
    this.textColor,
    this.iconSize,
    required this.dynamicHeight,
    required this.dynamicWidth,
    this.borderColor,
    required this.text,
    this.bgColor,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        height: MediaQuery.of(context).size.height * dynamicHeight,
        width: MediaQuery.of(context).size.height * dynamicWidth,
        decoration: BoxDecoration(
          border: Border.all(
            width: 2.0,
            color: borderColor!,
          ),
          borderRadius: BorderRadius.circular(10.0),
          color: bgColor,
        ),
        padding: context.paddingNormal,
        child: Column(
          children: [
            Icon(
              icon,
              size: iconSize,
              color: iconColor,
            ),
            SizedBox(height: context.dynamicHeight(0.02)),
            Text(
              text,
              style: context.textTheme.bodyMedium?.copyWith(color: textColor),
            ),
          ],
        ),
      ),
    );
  }
}


  BorderIconContainer(
                iconColor: Colors.black,
                icon: Icons.camera,
                textColor: Colors.black,
                iconSize: 48.0,
                dynamicHeight: 0.2,
                dynamicWidth: 0.2,
                borderColor: Colors.black,
                text: "Camera",
                bgColor: Colors.grey,
              ),

你可以试试这个代码块,输出如下

相关问题