Before we can show off Expanded and Flexible, we need to create a simple helper widget.
-
Create a new file, called labeled_container.dart, and import material.dart.
-
Add the following code in the labeled_container.dart file:
import 'package:flutter/material.dart';
class LabeledContainer extends StatelessWidget {
final double width;
final double height;
final Color color;
final String text;
final Color textColor;
const LabeledContainer({
Key key,
this.width,
this.height = double.infinity,
this.color,
@required this.text,
this.textColor,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
color: color,
child: Center(
child: Text(
text,
style: TextStyle(
color: textColor,
fontSize: 20,
),
),
),
);
}
}
- In the flex_screen.dart file, add this code:
import...