Question 186763 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Add border and text inside own button class

I have a problem. I want to add text below the Icon and I want to add a border with a background. How can I do that?

I don’t know how can I add a text inside the border with a background. What is the best option?

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);
  }
}

What I tried:

I tried to change this with an ElevatedButton that I can use a background and label.

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);
  }
}
Tags:

2

Answers


  1. 0

    You can create your own custom button and customise it.

      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),
          ),
        ),
      ),
    );
  }
}

    If you want an icon with the text, then replace the Text with Row or Column and add an Icon widget.

    Below is an example:

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

    Use it like this wherever you need it.

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

    Don’t forget to import the class like this.

    import '../../res/shared_widgets/custom_button.dart';
    Login or Signup to reply.
  2. 0

    Try out below code

    @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),
          ),
        ],
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search