You'd want to use a `Flexible` widget:
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Flexible(
flex: 3, // 30%
child: Container(
color: Colors.green,
height: 20,
),
),
Flexible(
flex: 2, // 20%
child: Container(
color: Colors.yellow,
height: 20,
),
),
Flexible(
flex: 5, // 50%
child: Container(
color: Colors.cyan,
height: 20,
),
),
],
),
],
)),
),
);
}
}
```
Here's what that looks like:
[![Demo][1]][1]
[1]: https://i.stack.imgur.com/ZH5T9.png
You can use the [BackdropFilter widget][1] to achieve this effect.
[![screenshot][1]][1]
<!-- language: lang-dart -->
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new FrostedDemo()));
}
class FrostedDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: new FlutterLogo()
),
new Center(
child: new ClipRect(
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5)
),
child: new Center(
child: new Text(
'Frosted',
style: Theme.of(context).textTheme.display3
),
),
),
),
),
),
],
),
);
}
}
[1]: https://i.stack.imgur.com/skYlW.png
