In this tutorial, you can easily learn about the flutter Expanded widget also an example.
An expanded widget expands your widget column-based or row-based.
Expanded(
flex:
2, //here flex 2 and all flex is 10 that means 100% .. here flex 2 means 20%
child: Container(
width: 300,
color: Colors.amber,
),
),
// wrap this container with expanded widget ..
Expanded(
flex:
6, //here flex 6 and all flex is 10 that means 100% .. here flex 2 means 60%
child: Container(
// this widget height not working cause.. expanded widget here....:)
width: 300,
color: Colors.green,
),
),
Expanded(
flex:
2, //here flex 2 and all flex is 10 that means 100% .. here flex 2 means 20%
child: Container(
width: 300,
color: Colors.red,
),
),
Flutter Expanded Widget
Full tutorial Source Code here:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
dynamic drodownvalues = "Menu one";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
// here already create scaffold ....
// in this tutorial you can easily learn about Expanded Widget...
// let's started ........
//create some container ...
// now every container expand with expanded widget ...
// now run this code ...
// ever widget loss her height .... if we delete height this working as same as..
// you can control height using flex property in expanded widget ...
Expanded(
flex:
2, //here flex 2 and all flex is 10 that means 100% .. here flex 2 means 20%
child: Container(
width: 300,
color: Colors.amber,
),
),
// wrap this container with expanded widget ..
Expanded(
flex:
6, //here flex 6 and all flex is 10 that means 100% .. here flex 2 means 60%
child: Container(
// this widget height not working cause.. expanded widget here....:)
width: 300,
color: Colors.green,
),
),
Expanded(
flex:
2, //here flex 2 and all flex is 10 that means 100% .. here flex 2 means 20%
child: Container(
width: 300,
color: Colors.red,
),
),
// already create three container .. now use expanded widget ..
// if you learn something in this tutorial please like and subscribe our channel.
// thank you.. see you again...
]),
),
);
}
}
- How to upgrade the Dart SDK version in flutterIf you’re a Flutter developer, you know how important it is to stay up-to-date with the latest version of the Dart SDK. Upgrading the Dart SDK ensures that you have access to the latest features, bug fixes, and performance improvements. Step 1: Check Your Current Dart SDK Version Before you begin the upgrade process, it’s …
- Changing AppBar Color in Flutter: Free Example CodeThe AppBar, a fundamental component in a Flutter app, not only provides navigation but also contributes to the app’s overall aesthetics. If you’re looking to make your app stand out, changing the AppBar color is a great way to start. In this comprehensive guide, we’ll walk you through the process with easy-to-follow steps and illustrative …
- Flutter Icon Widget Example? with AnimationIn the world of Flutter, the versatile and powerful “Icon” widget is a crucial element in creating visually appealing and intuitive user interfaces. Flutter, developed by Google, has rapidly become the go-to framework for building cross-platform applications with its ease of use and extensive set of widgets. In this comprehensive guide, we will explore the …
- Flutter the bottom navigation bar with routes Example CodeIn today’s fast-paced world, mobile app development requires a seamless user experience to stay ahead of the competition. One crucial aspect of creating a user-friendly app is the navigation system. Flutter, a popular cross-platform framework, offers a versatile solution with its Bottom Navigation Bar and Routes. In this comprehensive guide, we will explore how to …
- How to use URL launcher in Flutter with Example CodeFlutter, a popular UI toolkit, has opened doors to seamless cross-platform app development. As developers increasingly adopt this powerful framework, one essential feature they often seek is launching URLs. In this tutorial, we’ll explore how to use the URL Launcher package in Flutter with clear examples, guiding you step-by-step to enhance your app’s functionality. Integrating …
