1.Container和Text-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45843676/article/details/129774628

该代码示例展示了如何使用Flutter构建一个简单的应用程序，包括一个无AppBar的Scaffold，一个包含Container和Button的Column。Container设置了颜色渐变、边框、圆角和阴影效果，并使用了Transform进行skewY变形。Button则具有蓝色背景和白色文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';
/// 主入口
void main() {
  runApp(const MaterialApp(
    home: Scaffold(appBar: null, body: TheColumn()),
  ));
}

/// 最外层返回一个列
class TheColumn extends StatelessWidget {
  const TheColumn({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: const [TheContainer(), TheButton()]);
  }
}

/// 最外层返回一个Center布局
class TheCenter extends StatelessWidget {
  const TheCenter({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: TheContainer(),
    );
  }
}

/// 返回一个盒子
class TheContainer extends StatelessWidget {
  const TheContainer({super.key});

  static const bg = [Colors.green, Colors.yellow, Colors.red];

  @override
  Widget build(BuildContext context) {
    return Container(
        // Container容器内元素方位
        alignment: Alignment.center,
        width: 100,
        height: 100,
        padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
        // 偏移
        // transform: Matrix4.translationValues(10,10,20),
        // 旋转
        // transform: Matrix4.rotationX(2),
        transform: Matrix4.skewY(2),
        // 盒子样式
        decoration: BoxDecoration(
            // color: Colors.yellow,
            border: Border.all(color: Colors.red, width: 2),
            // 圆角
            borderRadius: BorderRadius.circular(10),
            // 配置阴影效果
            boxShadow: const [BoxShadow(color: Colors.black, blurRadius: 10.0)],
            // 背景颜色渐变颜色 LinearGradient线性渐变，RadiaGradient内到外渐变
            gradient: const RadialGradient(colors: bg)),
        child: const TheText());
  }
}

/// 文本
class TheText extends StatelessWidget {
  const TheText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      "你好",
      style: TextStyle(color: Colors.black),
    );
  }
}

/// 返回一个按钮
class TheButton extends StatelessWidget {
  const TheButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 40,
      alignment: Alignment.center,
      // padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      margin: const EdgeInsets.all(1),
      decoration: BoxDecoration(
          color: Colors.blue, borderRadius: BorderRadius.circular(10)),
      child: const Text(
        '按钮',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}