跟著 AI 學習實現某功能的各種程式寫法 — 以 Flutter 圓角矩形背景為例

學習程式設計時，因為時間和能力的限制，我們通常學會一種寫法就心滿意足，懶得再去研究其它寫法。不過現在有了知識量是人類千萬倍的 AI，我們可以回到初心，像小孩子一樣充滿好奇心，請 AI 教我們實現某功能的各種程式寫法。

以下我們以實現 Flutter 的圓角矩形背景為例，請 AI 介紹實現圓角矩形背景的各種方法。

• Container 搭配 BoxDecoration，borderRadius 設定 BorderRadius.circular。
• Container 搭配 ShapeDecoration，shape 設定 RoundedRectangleBorder。
• ClipRRect 的 borderRadius 設為 BorderRadius.circular。
• 天生圓角矩形背景的 Card。
• Card 的 shape 設定 RoundedRectangleBorder。
• DecoratedBox 搭配 BoxDecoration，borderRadius 設定 BorderRadius.circular。
• DecoratedBox 搭配 ShapeDecoration，shape 設定 RoundedRectangleBorder。
• Material 的 borderRadius 設定 BorderRadius.circular。

Container 搭配 BoxDecoration，borderRadius 設定 BorderRadius.circular

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
          child: const Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.star),
              Text('小王子: 你，就只有你，擁有會笑的星星'),
            ],
          ),
        ),
      ),
    );
  }
}

Container 搭配 ShapeDecoration，shape 設定 RoundedRectangleBorder

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          decoration: ShapeDecoration(
            color: Colors.blue,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          ),
          child: const Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.star),
              Text('小王子: 你，就只有你，擁有會笑的星星'),
            ],
          ),
        ),
      ),
    );
  }
}

ClipRRect 的 borderRadius 設為 BorderRadius.circular

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(8.0),
          child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.blue,
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

天生圓角矩形背景的 Card

什麼都不用做，Card 預設即有圓角矩形背景。

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Card(
          color: Colors.blue,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Card 的 shape 設定 RoundedRectangleBorder

Card 也可以搭配 RoundedRectangleBorder 的 BorderRadius.circular 自訂圓角弧度。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          color: Colors.blue,
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

DecoratedBox 搭配 BoxDecoration，borderRadius 設定 BorderRadius.circular

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(8),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

DecoratedBox 搭配 ShapeDecoration，shape 設定 RoundedRectangleBorder

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DecoratedBox(
          decoration: ShapeDecoration(
            color: Colors.blue,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Material 的 borderRadius 設定 BorderRadius.circular

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Material(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(8),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star),
                Text('小王子: 你，就只有你，擁有會笑的星星'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}