Stack Widget

 import "package:flutter/material.dart";


void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Hello",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: const FlutterApp(),
);
}
}

class FlutterApp extends StatefulWidget {
const FlutterApp({super.key});

@override
State<StatefulWidget> createState() {
return FlutterState();
}
}

class FlutterState extends State<FlutterApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: const Drawer(),
appBar: AppBar(
title: const Text(
"Flutter Stack Widget",
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.grey,
),
body: /*Stack( */ /*we can get linear pattern from Row and Column.we can get Relative pattern from Stack.*/ /*
children: [
Container(
width: 200,
height: 200,
color: Colors.blueGrey,
),

Container(
width: 160,
height: 160,
color: Colors.grey,
),
],
),*/

Container(
//Overlap here.To execute Overlapping structure,we can use Stack.
width: 300,
height: 300,
child: Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blueGrey,
),
Positioned(
left: 21,
top: 21,
bottom: 21,
right: 21,
child: Container(
width: 160,
height: 160,
color: Colors.grey,
),
),
],
),
),
);
}
}

Comments

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Pagination First Practical in Flutter

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter