Aug 27, 2022
.
Admin
Hello Friends,
In this tutorial, I will show you a flutter expanded class example. step by step explain the expanded class in a flutter. This article will give you a simple example of how you use expanded flutter. I’m going to show you how to use expanded in a flutter.
In this example, we will explore the Expanded and Flexible Widget In FLutter. We will also implement a demo of the Expanded and Flexible Widget, and describes its properties. and how to use them in your flutter applications. So let’s get started.
Step 1: Create Flutter Project
Follow along with the setup, you will be creating an Flutter app.
- $flutter create flutter_expanded_class_example
Navigate to the project directory:
- $cd flutter_expanded_class_example
Step 2: Main File
Create a main.dart file in the lib directory
import 'package:flutter/material.dart';
void main() {
return runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
// App Bar is used to create
// a bar to give a title for our app
appBar: AppBar(
title: const Text(
'Expanded Class',
// TextStyle is a class
// where we can modify our text
style: TextStyle(
//To assign the color to our text
color: Colors.white,
), //Text Style
), //Text
// backgroundColor is used to change
// the color of our app bar background
backgroundColor: Colors.blue,
), //AppBar
// Calling the function DicePage()
body: const DicePage(),
), //Scaffold
), //Material App
);
}
class DicePage extends StatefulWidget {
const DicePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_DicePageState createState() => _DicePageState();
}
class _DicePageState extends State<DicePage> {
@override
Widget build(BuildContext context) {
return Center(
//Here we are using the row.
// Instead of row we can also use
// column only the alignment of icon
// will change and other function remains same
child: Row(
children: <Widget>[
Expanded(
// FlatButton is used to make
// are image as a button which we can press.
child: TextButton(
child: Container(
color: Colors.blue,
padding: const EdgeInsets.all(14),
child: Image.asset('assets/images/1.jpg'),
),
onPressed: () {},
),
// FlatButton is depreacted and should not be use
// We can use TextButton instead of FlatButton
// child: FlatButton(
// //Image.asset is used to import the image
// // from our project files only in brackets
// // we are providing the name of our image.
// child: Image.asset('images/dice1.png'),
// ), //flat button
), //Expanded
], //<Widget>
), //Row
); //center
}
}
#Flutter