Flutter

Question

我正在尝试从 dribble 开发一个 App idea 的克隆，可以找到 here。

你能告诉我我正在尝试编写的代码是否正确吗？？当我试图用两个包含在容器中的文本小部件（单独）包裹一个列时，当我试图改变一个容器的宽度时，它也会改变另一个容器的边距。

我的代码是：-

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 30, left: 20),
              child: const Text(
                'Find Intrested Events to Join',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 30.0,
                  wordSpacing: 2,
                ),
              ),
              width: 200,
            ),
            // -----------------------------------------------------------------
            Container(
              margin: EdgeInsets.only(left: 20, top: 20),
              width: 220,
              child: Text(
                'We share all events like Charity, workshop, Blood drive, etc.',
                style: TextStyle(wordSpacing: 2, height: 1.4),
              ),
            )
          ],
        ),
      ),
    );

你能告诉我如何实现我可以改变容器的宽度而不影响其他容器的边距的阶段吗？

Answer 1

这种情况下使用 Stack 会更好，因为它包含背景图像，同时了解有关 Stack、Align、Positioned 和 [=15 的更多信息=] 来自 flutter.dev

玩这个小部件，


class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: LayoutBuilder(
        builder: (context, constraints) {
          return Stack(
            children: [
              Container(
                color: Colors.amber.withOpacity(.4),
              ), //background image
              Positioned(
                left: 20,
                top: 30,
                child: SizedBox(
                  width: constraints.maxWidth * .5, // 50% of width
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text(
                        'Find Intrested Events to Join',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 30.0,
                          wordSpacing: 2,
                        ),
                      ),

                      SizedBox(
                        height: 20,
                      ), //spaces between text
                      Text(
                        'We share all events like Charity, workshop, Blood drive, etc.',
                        style: TextStyle(wordSpacing: 2, height: 1.4),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                // also Postisioned can be use
                alignment: Alignment.bottomCenter,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("hereh"),
                    ElevatedButton(onPressed: () {}, child: Text("Button"))
                  ],
                ),
              )
            ],
          );
        },
      )),
    );
  }
}

Flutter - 如何 2 为包含在单列中的不同容器提供不同的宽度？

Flutter - How 2 Give different width to different container enclosed in a single column?

dart

flutter-layout