設置孩子的透明顏色以在 Flutter 中重新創建此布局

Question

我目前正在學習一門需要重新創建此布局的課程：布局設計

我正在努力在腳手架中心的第二個盒子上設置透明的黃色。 這是我的代碼：

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(scaffoldBackgroundColor: Colors.teal),
      home: Scaffold(
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                color: Colors.red,
                height: double.infinity,
                width: 100.0,
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      color: Colors.yellow,
                      height: 100.0,
                      width: 100.0,
                    ),
                    Container(
                      width: 100.0,
                      height: 100.0,
                      color: Colors.yellowAccent,
                    )
                  ]),
              Container(
                color: Colors.blue,
                height: double.infinity,
                width: 100.0,
              )
            ],
          ),
        ),
      ),
    );
  }
}

感謝您的幫助。

Answer 1

只需與Colors.yellow.withOpacity(0.3)用於第二個框

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(scaffoldBackgroundColor: Colors.teal),
      home: Scaffold(
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                color: Colors.red,
                height: double.infinity,
                width: 100.0,
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      color: Colors.yellow,
                      height: 100.0,
                      width: 100.0,
                    ),
                    Container(
                      width: 100.0,
                      height: 100.0,
                      color: Colors.yellow.withOpacity(0.3),
                    )
                  ]),
              Container(
                color: Colors.blue,
                height: double.infinity,
                width: 100.0,
              )
            ],
          ),
        ),
      ),
    );
  }
}