帶有一些文本的半圈顫振

Question

我是flutter的新手，但我想知道是否有可能在flutter中做這樣的事情？ 在兩個文本內繪制半個圓圈，我將在登錄表單中使用它。

Answer 1

您可以使用 Stack 小部件進行可自定義的疊加。

home: Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) {
      final width = constraints.maxWidth;
      return SizedBox(
        width: width,
        height: constraints.maxHeight,
        child: Stack(
          children: [
            // background 1st
            Positioned(
              top: 10,
              left: -width * .4,
              bottom: 10,
              right: 10,
              child: Container(
                decoration: const ShapeDecoration(
                  shape: CircleBorder(),
                  color: Colors.grey,
                ),
              ),
            ),

            Align(
              alignment: Alignment(-.4, .2),
              child: Text("Some Text"),
            ),
            Align(
              alignment: Alignment(-.4, -.2),
              child: Text("Some Text"),
            ),
          ],
        ),
      );
    },
  ),
),

查看有關Stack小部件和/ui/layout的更多信息。

Answer 2

您可以使用灰色創建容器並在盒子裝飾中進行一些更改。 比如邊界半徑。 這是代碼。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 125,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(200),
                    topRight: Radius.circular(200),
                    bottomLeft: Radius.circular(0),
                    topLeft: Radius.circular(0)),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("SOME TEXT", style: TextStyle(fontSize: 15)),
                  SizedBox(
                    height: 50,
                  ),
                  Text("SOME TEXT", style: TextStyle(fontSize: 15)),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}