如何在 flutter 的容器內進行曲線設計？

Question

我試圖了解如何在容器中設計曲線，如下所示 誰能幫我設計這種容器？ 如果有人為這種設計提供代碼，將不勝感激。 先感謝您。

Answer 1

使用Stack和boxDecoration ，使用邊距和大小來獲得最佳效果。

SizedBox(
          width: double.infinity,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: Colors.grey,
                  boxShadow: const [
                    BoxShadow(color: Colors.grey, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff232fac),
                  boxShadow: const [
                    BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
              Container(
                width: 200,
                margin: const EdgeInsets.only(left: 150),
                child: const Center(
                  child: Text('\$1400'),
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40),
                  color: const Color(0xff483395),
                  boxShadow: const [
                    BoxShadow(color: Colors.white, spreadRadius: 3),
                  ],
                ),
                height: 50,
              ),
            ],
          ),
        ),

• 閱讀堆棧
• 閱讀有關 boxDecoration 的信息

Answer 2

您可以使用容器的裝飾屬性為容器添加邊框半徑

Container(
  height: 25,
  width: 100,
 decoration: BoxDecoration (
    borderRadius : BorderRadius circular(15),
   color: Colors.purple
  )
)

Answer 3

使用堆棧和漸變來實現這一點

Stack(
  clipBehavior: Clip.none,
  alignment: Alignment.center,
  children: [
    Container(
      height: 50,
      width: double.infinity,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        gradient: LinearGradient(colors: [
            Colors.purple,
            Colors.grey,
          ],
          stops: [0.5, 0],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text("\$1400"),
            Text("\$700"),
          ],
        ),
      ),
    ),
    Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        color: Colors.green,
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Text("\$700"),
      ),
    ),
  ],
 

Stack(
  clipBehavior: Clip.none,
  alignment: Alignment.center,
  children: [
    Container(
      height: 50,
      width: double.infinity,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        gradient: LinearGradient(colors: [
            Colors.purple,
            Colors.grey,
          ],
          stops: [0.5, 0],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text("\$1400"),
            Text("\$700"),
          ],
        ),
      ),
    ),
    Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration (
        borderRadius : BorderRadius.circular(50),
        color: Colors.green,
        border: Border.all(color: Colors.white, width: 2)
      ),
      child: Center(
        child: Text("\$700"),
      ),
    ),
  ],

Answer 4

使用裝飾屬性見簡單使用。

Container(
        height: 50,
        width: 500,
        decoration: BoxDecoration (
                borderRadius : BorderRadius circular(40),
                color: Colors.red)
       child: const Center(
        child: Text('\$ 1400'),),
)

Answer 5

你可以嘗試這樣的事情：

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  final double center = 300;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Positioned(
            left: 0,
            child: Container(
              width: center,
              decoration: BoxDecoration(
                  gradient: const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.indigo, Colors.blue]),
                  borderRadius: BorderRadius.all(Radius.circular(
                      MediaQuery.of(context).size.height / 2.0)),
                  border: Border.all(color: Colors.white, width: 3)),
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    '\$ 1400',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            )),
        Positioned(
            right: 0,
            child: Container(
              width: MediaQuery.of(context).size.width - center,
              decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(
                      MediaQuery.of(context).size.height / 2.0)),
                  border: Border.all(color: Colors.white, width: 3)),
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    '\$ 900',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            )),
        Positioned(
            left: center,
            child: FractionalTranslation(
              translation: const Offset(-0.5, 0),
              child: Container(
                decoration: BoxDecoration(
                    gradient: const LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Colors.indigo, Colors.purple]),
                    borderRadius: BorderRadius.all(Radius.circular(
                        MediaQuery.of(context).size.height / 2.0)),
                    border: Border.all(color: Colors.white, width: 3)),
                child: const Center(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
                    child: Text(
                      '\$ 700',
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
            )),
      ]),
    );
  }
}

output：