[FIXED] Put text in background of a Card in Flutter

Issue

My goal would simply be to put text with a fixed size as the background of a Card in Flutter (with possible overflow).

I have tried to put the background text the Stack() widget, behind the foreground text. However it also enlarge the parent Card().
And, when you fix the Card’s size, it does cut the background text only in the bottom.

Anyone can help me with that ?

Here are my tests:

import 'package:flutter/material.dart';

class BackgroundCard extends StatelessWidget {
  const BackgroundCard({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // Test 1
            SizedBox(
              height: 48,
              child: Card(
                child: Stack(
                  children: [
                    const Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Text',
                        style: TextStyle(
                          fontSize: 48,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                    Container(
                      child: const Text('Foreground Text'),
                    ),
                  ],
                ),
              ),
            ),

            // Test 2
            Card(
              child: Stack(
                children: [
                  const Text(
                    'Text',
                    style: TextStyle(
                      fontSize: 48,
                      color: Colors.blue,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.all(12),
                    child: const Text('Foreground Text'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The tests results
My tests results

The expected result
Expected result

Solution

Well, you are almost done.
Just have to apply some opacity to your background Text.

  Card(
    child: Stack(
      children: [
        Container(
          width: 350,
          height: 100,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text(
              'text',
              style: TextStyle(
                fontSize: 100,
                color: Colors.blue.withOpacity(0.1),
              ),
            ),
          ),
        ),
        Container(
          width: 400,
          height: 100,
          margin: const EdgeInsets.all(12),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                const Text(
                  'Foreground Text',
                  style: TextStyle(fontSize: 30),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                      color: Colors.grey.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(10)),
                  padding: EdgeInsets.all(10),
                  child: Text("+1"),
                )
              ],
            ),
          ),
        ),
      ],
    ),
  ),

And Here the final result
final

Answered By – hamzat_yhs

Answer Checked By – Mildred Charles (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published