我想在Flutter 中创造这样的纽扣. 好的,我知道Text1和Text2必须在Row()中. 我不知道要创建这个对齐,文本1必须居中,文本2必须右对齐.

Image of what I want to create enter image description here

我的代码

import 'package:flutter/material.dart';
import 'package:streeti/static/static_colors.dart';

class ButtonWithBlue extends StatelessWidget {
  const ButtonWithBlue({Key? key, required this.text1, required this.text2})
      : super(key: key);

  final String text1;
  final String text2;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          height: 75,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white12,
            border: Border.all(
              color: AppColors.BlueColor,
              width: 1.0,
            ),
          ),
          child: RawMaterialButton(
            onPressed: () {},
            splashColor: Colors.blue,
            child: Stack(
              children: [
                Positioned(
                  right: -20,
                  top: -25,
                  height: 120,
                  width: 120,
                  child: Container(
                    decoration: ShapeDecoration(
                      color: AppColors.BlueColor,
                      shape: const CircleBorder(),
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        text1,
                        style: TextStyle(color: Colors.black, fontSize: 18),
                      ),
                      SizedBox(
                          width: 8), // Add some space between text1 and text2
                      Text(
                        text2,
                        style: TextStyle(color: Colors.black, fontSize: 18),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如何构建这个按钮,使文本1在中间,文本2在右侧?(如图所示) 正如我所写的,我知道我应该使用Row(),但在本例中我不知道如何使用它. SpaceBettwen+中心?

推荐答案

H!,您可以使用Spacer()

Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Spacer(),
                      Text(
                        text1,
                        style:
                            const TextStyle(color: Colors.black, fontSize: 18),
                      ),
                      const Spacer(),
                      const SizedBox(
                          width: 8), // Add some space between text1 and text2
                      Text(
                        text2,
                        style:
                            const TextStyle(color: Colors.black, fontSize: 18),
                      ),
                    ],
                  ),

此外,为了不被切掉蓝边,您必须添加到ClipRRect内的容器中:

ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          height: 75,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(
              Radius.circular(20), // <----
            ),
            color: Colors.white12,
            border: Border.all(
              color: Colors.blue,
              width: 2.0,
            ),
          ),
    ...
    

Flutter相关问答推荐

Box约束强制无限高:SizedBox. Expand()

Android Emulator冻结,但在调整窗口大小时解冻

将侧边菜单和底部导航栏放在同一Flutter 应用程序中

如何在Date Time类中只显示日期?

通过Ffltter应用程序与Docker服务器进行交互以进行身份验证

在 Flutter 中滑动关闭 PageView.builder 时出现问题

SliverAppbar 呈蓝色

Firestore 不会取代 map

Flutter - Riverpod 2.0 - 如何访问 onDispose 回调?

模块是使用不兼容的 kotlin 版本编译的.其元数据的二进制版本是1.8.0,预期版本是1.6

如何从列表中更新provider变量:Flutter列表和Provider优化指南

来自服务器的数据未分配给变量

为什么我们使用 RiverpodGenerator

Paypal 支付网关添加带有 magento 2 网络详细信息用户名、密码、签名 Magento 2 的 flutter 应用程序?

Flutter blue plus 库,当try 从 esp32 驱动程序获取 PlatformException 时读取特性

flutter 在文本字段中更改部分文本选定 colored颜色

如何将 chrome web 模拟器添加到 vs code

如何在 Flutter 中将 ScaffoldMessenger 中的 Snackbar 显示为 Widget?

有什么方法可以将 ChangeNotifier 与 ValueListenableBuilder 一起使用

为什么这个参数类型不能分配给参数类型?