флаттер: текст на изображении во флаттере

avatar
Deepak
8 августа 2021 в 17:28
852
2
0

Я хочу написать текст прозрачным цветом на изображении. вот так.

enter image description here

Я хочу написать текст поверх изображения, но не могу сделать это должным образом.

Это мой код.

Я хочу написать текст поверх изображения, но не могу сделать это должным образом. И я также хочу прозрачный цвет для текста. Пожалуйста, помогите мне.

import 'package:card_example/color_filters.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static final String title = 'Card Example';

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,

        title: title,
        theme: ThemeData(primarySwatch: Colors.deepOrange),
        home: MainPage(title: title),
      );
}

class MainPage extends StatefulWidget {
  final String title;

  const MainPage({
    @required this.title,
  });

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),

        body: ListView(
          padding: EdgeInsets.all(16),
          children: [
         Card(

        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [

            Ink.image(
              image: NetworkImage(
                'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
              ),
              colorFilter: ColorFilters.greyscale,
              child: InkWell(

                onTap: () {},
              ),
              height: 240,
              fit: BoxFit.cover,
            ),
            Text(
              'Sachin Tendulkar',

              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ],

        ),
      )
          ],
        ),
      );

}}

Я хочу написать текст поверх изображения, но не могу сделать это должным образом. И я также хочу прозрачный цвет для текста. Пожалуйста, помогите мне.

Если вы хотите использовать для этого контейнера, и я использую украшение для текстового виджета изображения для текста, то как сделать то же самое, что и на изображении.

Источник
Mariano Zorrilla
8 августа 2021 в 17:36
0

Если вы используете стек, ваш текст должен иметь виджет выравнивания, который должен быть принудительно расположен внизу. Если нет, вы можете использовать BoxDecoration из контейнера для создания того же эффекта.

Yeasin Sheikh
8 августа 2021 в 18:19
0

Вы хотите splassEffect?

Ответы (2)

avatar
Yeasin Sheikh
8 августа 2021 в 18:28
1

Если принять во внимание splashColor, есть несколько способов справиться с этим:

использование Ink.image() внутри Stack не даст circular borderRadius. Проверьте эта проблема GitHub. все еще не решена.

enter image description here

 ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: SizedBox(
            width: 300,
            height: 300,
            child: Stack(
              fit: StackFit.expand,
              children: [
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: double.infinity,
                    padding: EdgeInsets.all(8),
                    color: Colors.blue.withOpacity(.5),
                    child: Text(
                      'Sachin Tendulkar',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                ),
                Ink.image(
                  image: NetworkImage(
                    'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
                  ),
                  fit: BoxFit.cover,
                  child: InkWell(
                    borderRadius: BorderRadius.circular(12),
                    onTap: () {},
                  ),
                ),
              ],
            )),
      );

1: Использование GridTile

Container(
        width: 300,
        height: 300,
        color: Colors.transparent,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: InkWell(
            onTap: () {},
            child: GridTile(
              child: Image.network(
                'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
                fit: BoxFit.cover,
              ),
              footer: Container(
                padding: EdgeInsets.all(8),
                color: Colors.blue.withOpacity(.5),
                child: Text(
                  'Sachin Tendulkar',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
            ),
          ),
        ),
      );

2: Использование оформления контейнера

 InkWell(
        onTap: () {},
        splashColor: Colors.red,
        child: Container(
          width: 300,
          height: 300,
          alignment: Alignment.bottomCenter,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            image: DecorationImage(
              image: NetworkImage(
                'https://resources.pulse.icc-cricket.com/ICC/photo/2018/04/22/c19486c2-4e5b-48c4-82af-c6d0eebb7bd2/Main.jpg',
              ),
              fit: BoxFit.cover,
            ),
          ),
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(.5),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(12),
                bottomRight: Radius.circular(12),
              ),
            ),
            padding: EdgeInsets.all(8),
            child: Text(
              'Sachin Tendulkar',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      );
Yeasin Sheikh
8 августа 2021 в 18:40
0

поиграйте со шрифтом и непрозрачностью текстового контейнера.

avatar
Lucas Josino
8 августа 2021 в 17:45
0

Попробуйте добавить bottomCenter к alignment

Stack(
  alignment: Alignment.bottomCenter, //Here
  children: [
    Ink.image(
      image: NetworkImage(
        'https://static.remove.bg/remove-bg-web/3661dd45c31a4ff23941855a7e4cedbbf6973643/assets/start_remove-79a4598a05a77ca999df1dcb434160994b6fde2c3e9101984fb1be0f16d0a74e.png',
      ),
      child: InkWell(
        onTap: () {},
      ),
      height: 240,
      fit: BoxFit.cover,
    ),
    Text(
      'Sachin Tendulkar',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontSize: 24,
      ),
    ),
  ],
);

Результат:

enter image description here

Yeasin Sheikh
8 августа 2021 в 18:07
0

Как получить круглую границу?