'How do you access parent widget elements?
I'm completely new to flutter/dart and trying to understand how things work, apologies in advance for this question.
I'm trying to learn how to re-size columns and containers, and have the following container:
AdaptiveContainer(
constraints: const AdaptiveConstraints.medium(),
columnSpan: 12,
padding: const EdgeInsets.all(24.0),
color: Colors.yellow,
child: const CenterWidget(),
),
I wanted to try adding a child container that scales the font size based on the constraints like so:
import 'package:flutter/material.dart';
//import 'adaptive_container.dart';
class CenterWidget extends StatelessWidget {
const CenterWidget({Key? key}) : super(key: key);
Widget _buildMyWidget(BuildContext context) {
return Center(
child: Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.blue[600],
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.0),
child: const Text(
'Hello World', ***change text size here***
),
),
);
}
@override
Widget build(BuildContext context) {
return Builder(
builder: _buildMyWidget,
);
}
}
Does this line give me access to the parent container?
Widget _buildMyWidget(BuildContext context)
My understanding is that when I call CenterWidget(), the context should have the constraints of AdaptiveContainer?, since I've defined it as medium()?
I tried a bunch of weird stuff like setting a global, trying to find out where in context.owner.buildScope() I can find it, but I think I'm lost in my understanding.
On a plus note, I've got it making the containers, and I've customized them, and figured out some basic theming, but this is stumping me. Thanks for your help and patience.
Edit: Got some help below, and this is what I have now which gives me the result I'm looking for:
class CenterWidget extends StatelessWidget {
const CenterWidget({Key? key, String? constraints}) : super(key: key);
Widget _buildMyWidget(BuildContext context) {
return LayoutBuilder(builder: ((context, constraints) {
if (constraints.maxWidth < 600) {
return Center(
child: Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 +
100.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.blue[600],
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.0),
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline2,
),
),
);
}
return Center(
child: Container(
constraints: BoxConstraints.expand(
height:
Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.blue[600],
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.0),
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline1,
),
),
);
}));
}
@override
Widget build(BuildContext context) {
return Builder(
builder: _buildMyWidget,
);
}
}
I just thought there was an easier way to determine if I'm using xsmall, medium, or large window.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
