For example in the following code if I am resizing the window vertically my icons of button and containers holding the icon button scales properly and never having any pixel overflow but if i do it horizontally it overflows after a certain length. on my 1080p 27 inch monitor when window width less than 265 it overflows.
I was wondering what adaptive rescaling can I use so that when horizontally it cannot fit the icons it also rescales ensuring no pixel overflow?
for rectangular stuffs its easy because you can set both width and height but for circular or square shapes I am having a hard time.
import "dart:ffi" as ffi;
import "package:flutter/material.dart";
const Color appBarColor = Color(0xFF1B5E20);
const Color white = Color(0xFFFFFFFF);
void main() {
runApp(const CalcWidget());
}
class CalcWidget extends StatelessWidget {
const CalcWidget({super.key});
@override
Widget build(BuildContext context) {
final Size scrnSize = MediaQuery.sizeOf(context);
return getMaterialApp(scrnSize);
}
}
MaterialApp getMaterialApp(Size scrnSize) {
final Scaffold home = Scaffold (
backgroundColor : Colors.white38,
body: SafeArea(
child: Column (
children: <Widget>[
getAppBar(scrnSize),
],
),
)
);
return MaterialApp (home : home);
}
Container getAppBar(Size scrnSize) {
final double h = scrnSize.height * 0.08;
final double subContainerSz = h - (h * 0.08);
return Container(
width: scrnSize.width,
height: h,
decoration: const BoxDecoration (
color: appBarColor,
shape: BoxShape.rectangle
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget> [
const SizedBox(width: 4),
createIconButtonContainer(Icons.menu, subContainerSz, (){})
]
),
const Text (
"Calculator",
textAlign: TextAlign.center,
style: TextStyle(
color: white,
fontWeight: FontWeight.bold
)
),
Row (
mainAxisAlignment: MainAxisAlignment.start,
children: [
createIconButtonContainer(Icons.arrow_upward, subContainerSz, (){}),
const SizedBox(width: 4),
createIconButtonContainer(Icons.arrow_downward, subContainerSz, (){}),
const SizedBox(width: 4)
],
)
],
),
);
}
Container createIconButtonContainer(IconData icon, double containerSz, Function() onPress) {
final Container ibc = Container(
width: containerSz,
height: containerSz,
alignment: Alignment.center,
decoration: BoxDecoration(
color: appBarColor.withOpacity(0.5),
shape: BoxShape.circle,
border: Border.all(color: appBarColor, width: 2),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xFF000000).withOpacity(0.35),
spreadRadius: 1,
blurRadius: 5,
offset: const Offset(0, 3),
)
]
),
child: Center(
child : IconButton(
padding: EdgeInsets.zero,
icon: Icon (
icon,
color: white,
size: containerSz*0.6,
),
onPressed: onPress,
)
)
);
return ibc;
}