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

Background for Text Field in Flutter

I want to create a background for my text field in Flutter. What are the different methods I can use? Something similar to this example 👇

enter image description here

I have this :
enter image description here

but it isn’t rounded…

Tags:

2

Answers


  1. 0

    I don’t know if you absolutely want to use Paint() but this is my solution without it.

    import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  const CustomText({required this.text, super.key});

  final String text;


  final size = 30.0;

  @override
  Widget build(BuildContext context) {
    return Container(
          height: size - 6.0,
          margin: const EdgeInsets.all(5.0),
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            color: backgroundColor,
          ),
          child: Transform.translate(
            offset: const Offset(
                0.0, -10.0), // Change the 2e value to up and down the text
            child: Text(
              text,
              overflow: TextOverflow.visible,
              style: TextStyle(
                shadows: const [
                  Shadow(
                    color: Colors.black,
                    offset: Offset(2.0, 3.0), // to manipulate text shadow
                  ),
                ],
                fontSize: size,
              ),
            ),
          ),
        );
  }
}


class Tester extends StatelessWidget {
  const Tester({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        children: [
            CustomText(
              text: 'Change the Offset',
              backgroundColor: Colors.red,
            ),
            CustomText(
              text: 'to up and down',
              backgroundColor: Colors.red,
            ),
            CustomText(
              text: 'the text',
              backgroundColor: Colors.red,
            ),
        ],
      ),
    );
  }
}

    Looks like this

    enter image description here

    text’s shadow can be modify with the second offset too

    Login or Signup to reply.
  2. 0

    Sorry I didn’t saw you need a TextField

    I left the last answer whether someone need it.

    There is the way.

    import 'package:flutter/material.dart';

class CustomTextField extends StatelessWidget {
  CustomTextField({required this.backgroundColor, super.key});

  final Color backgroundColor;

  final size = 25.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: size,
        width: 250,
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          color: backgroundColor,
        ),
        child: Transform.translate(
          offset: const Offset(
              0.0, -10.0), // Change the 2e value to up and down the text
          child: TextField(
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: size,
              shadows: const [
                Shadow(
                  color: Colors.black,
                  offset: Offset(0.0, 2.0),
                ),
              ],
              overflow: TextOverflow.visible,
            ),
            decoration: const InputDecoration(
              isDense: true,
              enabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
              contentPadding: EdgeInsets.zero, //IMPORTANT MUST STAY AT ZERO OTHERWISE TEXT IS HIDDEN WHEN LONGER THAN THE INPUT WIDTH
            ),
          ),
        ),
      ),
    );
  }
}

    Result:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search