Put text in background of a Card in Flutter

Question

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

Himanshu Bodwal · Answer 1 · 2022-09-14T06:53:09.567

0

Try this:

Card(
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("images/image.png"),
        fit: BoxFit.fitWidth,
        alignment: Alignment.topCenter,
      ),
    ),
    child: Text("YOUR TEXT"),
  ),
),

edited Sep 14 '22 at 06:53

answered Sep 14 '22 at 06:49

Himanshu Bodwal

3
3

This works, but for an image... I'll have to put dynamic text in the background afterwards. So fitting a Text or a String is really mandatory. – Ryu Roman Sep 14 '22 at 07:04

score 0 · Accepted Answer · edited Sep 18 '22 at 12:59

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

So I added a clipBehavior to the FittedBox to remove the overflow outside the Card. However the size of the background text is changing depending on the text's length and not it's fontSize. Fixing that would answer the whole problem. — Ryu Roman, Sep 14 '22 at 09:22
I thought you wanted the text to be as large as the card. If not we just have to remove the FittedBox widget. And then the fontSize will have its effect — 70B1 H4CK3R, Sep 14 '22 at 10:35

Put text in background of a Card in Flutter

2 Answers2