如何在容器中插入文本并为图像填充

Question

我想在我的容器中插入文本我试过这个代码段。但它没有显示。第一张图片显示了它现在的显示方式。图二显示了我需要如何实现它。图像图标也需要从角落填充。我该怎么做。

 child: Text(
             "Activity",
          style: TextStyle(color: textWhite, fontSize: 2)),

  ///////////////// //////////////////////////////////////////////////////////

 Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(20),
                        height: 45,
                        width: 180,
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.4),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            bottomLeft: Radius.circular(10),
                          ),
                          image: DecorationImage(
                            alignment: Alignment.centerLeft,
                            image: AssetImage(
                              'assets/images/running.png',
                            ),
                          ),
                        ),
                        child: Text(
                          "Activity",
                          style: TextStyle(color: textWhite, fontSize: 20),
                        ),
                      ),
                      Container(
                        height: 45,
                        width: 180,
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.4),
                          borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(10),
                          ),
                          image: DecorationImage(
                            alignment: Alignment.centerLeft,
                            image: AssetImage('assets/images/medal.png'),
                          ),
                        ),
                      )
                    ],
                  ),
                )

Answer 1

这张图片与您的目标相似。运行在 DartPad 上。您可以将 Image.network 更改为 Image.asset

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: HomePage());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      // backgroundColor: Colors.blue[700],
      body: Container(
        height: 45,
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.4),
          borderRadius: BorderRadius.circular(10),
        ),
        margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
        child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            iconRowText('https://picsum.photos/45', 'Activity'),
           Container(
             height: 45,
             width: 0.4,
             color: Colors.black,
           ),
            iconRowText('https://picsum.photos/45', 'Achievements'),
          ],
        ),
      ),
    );
  }

  Row iconRowText(String image, String text) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.network(image, height: 45, width: 45, fit: BoxFit.cover),
        ),
        Text(text),
      ],
    );
  }
}

Answer 2

使用下面的代码但是你需要根据你的风格编辑

Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 50,
                width: 200,
                // You can set width of container here
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    bottomLeft: Radius.circular(15),
                  ),
                ),
                child: Padding(
                  // Following padding to give space around the icon and text
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/running.png',
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Text(
                        "Activity",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 200,
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(15),
                    bottomRight: Radius.circular(15),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/medal.png',
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Text(
                        "Achievement",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),

您将得到以下回复

如何在容器中插入文本并为图像填充

how to insert a text in a container and padding for an image

flutter

flutter-layout