i'm currently taking a course where i need to recreate this layout: Layout design
I'm struggling to set that transparent yellow color on the second box in the center of the scaffold. This is my code:
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,
)
],
),
),
),
);
}
}
Thank you for the help.
Just use with Colors.yellow.withOpacity(0.3)
for the second box
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,
)
],
),
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.