Was wondering is there a way to control textscalefactor for TextField widget in flutter. Basically I want to limit a text field from growing too large when a user increase font/text size in their devices accessibility settings.
Thanks.
You can wrap it with a MediaQuery with a custom textScaleFactor
Widget build(BuildContext context) {
final mqData = MediaQuery.of(context);
final mqDataNew = mqData.copyWith(textScaleFactor: mqData.textScaleFactor > 5.0 ? 5.0 : mqData.textScaleFactor)
return MediaQuery(data: mqDataNew, child: TextField());
}
The TextField does not need to be a direct child of MediaQuery.
You can set lower and upper bounds for the textScaleFactor of your entire app.
return MaterialApp(
builder: (context, child) {
const lowerLimit = 1.0;
const upperLimit = 1.2;
final mediaQueryData = MediaQuery.of(context);
final scale = mediaQueryData.textScaleFactor.clamp(lowerLimit, upperLimit);
return MediaQuery(
child: child,
data: MediaQuery.of(context).copyWith(textScaleFactor: scale),
);
},
);
Related
I've been trying to implement a gyroscope image viewer using the sensors package, however, the result seems to be very laggy. I have found a similar project on YouTube which is trying to achieve a similar goal, but as you can see in the video the animation is also very laggy.
The following code is simply outputting the data from the event, I notice how the data is being updated lags like 50ms in between updates.
Is there a way to smoothen the animation or update the data faster? Or is this a Flutter limitation?
NOTE:
I have tried --release version as suggested by other posts but the result stays the same.
import 'package:sensors/sensors.dart';
class MyGyro extends StatefulWidget {
final Widget child;
MyGyro({this.child});
#override
_MyGyroState createState() => _MyGyroState();
}
class _MyGyroState extends State<MyGyro> {
double gyroX = 0;
double gyroY = 0;
#override
void initState() {
super.initState();
gyroscopeEvents.listen((GyroscopeEvent event) {
setState(() {
gyroX = ((event.x * 100).round() / 100).clamp(-1.0, 1.0) * -1;
gyroY = ((event.y * 100).round() / 100).clamp(-1.0, 1.0);
});
});
}
#override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(gyroY, 0),
child: Container(
child: Center(
child: Column(
children: [Text("X: ${gyroX}"), Text("Y: ${gyroY}"),],
),
),
),
),
);
}
}
I have found that is purely the problem of the sensors package I was using, either they have hard coded a slower interval when listening to the sensor event, or they are just using the default interval by the IOS channel.
So, I have found another package called flutter_sensors which had solved the problem. It's a very simple API to access the sensor events, but it allows you to change the interval.
I`m using width and height params of Container to determine widget size. but the widget is not adaptive if tested on other devices. I came from native android where i used to use density independent pixels(dp) that is adaptive to any screen size. what is the equivalent to dp in flutter ?
I dont want to use MediaQuery every time to calculate screen width and height.
You can use the SizeBox.expand widget to let your widget expand to take the available space regardless of size documentation
SizedBox.expand(
child:MyButton(),
),
And if you want to keep an aspect ratio regardless of screen size you can use the AspectRatio widget documentation
AspectRatio(
aspectRatio: 3/2,
child:MyButton(),
),
If your widgets are just in a row or column and you want to add weights among them to fill the spaces you can use the Expanded widget
Expanded(
flex: 1,//weight for the widget
child: Container(
color: Colors.amber,
height: 100,
),
)
,
You can set the size of your UI widgets this way:
width: 100.0 * MediaQuery.of(context).devicPixelRatio ,
the function MediaQuery.of(context).devicPixelRatio will return the actual number of pixel in each logical pixel, so you'll be sure that the same 100.0 pixel on your test device are typical to those of the user whatever screen density they have.
i applied this way :
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}
class HomeScreen extends StatelessWidget { #override Widget
build(BuildContext context) { SizeConfig().init(context); … } }
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: SizeConfig.blockSizeVertical * 20,
width: SizeConfig.blockSizeHorizontal * 50,
color: Colors.orange,
),
);
}
https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a
Is there any way to mirror your text or any widget in Flutter? Like in Android, I can do
scaleY = -1
scaleX = -1
I couldn't find anything similar to this in Flutter. I tried following but it simply rotates your text by 90˚
Transform.scale(scale: -1.0)
Check out this post, it may have something that could help you.
#override
Widget build(BuildContext context) {
return Transform( // Transform widget
transform: Matrix4.identity()
..setEntry(3, 2, 0.001) // perspective
..rotateX(_offset.dy)
..rotateY(_offset.dx),
alignment: FractionalOffset.center,
child: _defaultApp(context), // <<< set your widget here
);
}
I'm trying to display a widget once I have info about the max scroll extent. I can find that number if I assign an instance of ScrollController to the controller property of a scrollable widget.
My problem is that the ScrollController gets attached to the scrollable widget during the build, so I can not use the max scroll extent number before the first build. Thus what I was trying to do is display an empty Container in the first build and then switch that empty Container with the widget I actually want. Something like this:
_scrollController.positions.length == 0 ? new Container() : new Align(
alignment: Alignment.center,
child: new Container(
width: constraints.maxWidth,
height: 50.0,
color: Colors.black,
)
)
Now this does not work of course because _scrollController.positions.length will be 0 at the beginning and nowhere do I call setState when this value changes (when the controller gets attached).
So my question: Is there a place where I can get notified whenever the ScrollController gets attached to a scrollable widget? Or is there a better approach for this?
If the scrollable is widget.child.
#override
Widget build(BuildContext context) {
return new NotificationListener<ScrollNotification>(
onNotification: _handleScrollNotification,
child: widget.child,
);
}
bool _handleScrollNotification(ScrollNotification notification) {
if (notification is ScrollUpdateNotification || notification is OverscrollNotification) {
widget.child.update(notification.metrics);
}
return false;
}
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => afterFirstLayout(context));
}
void afterFirstLayout(BuildContext context) {
applyInitialScrollPosition();
}
void applyInitialScrollPosition() {
ScrollController scrollControler = widget.child.controller;
ScrollPosition position = scrollControler.position;
ScrollNotification notification = ScrollUpdateNotification(
metrics: FixedScrollMetrics(
minScrollExtent: position.minScrollExtent,
maxScrollExtent: position.maxScrollExtent,
pixels: position.pixels,
viewportDimension: position.viewportDimension,
axisDirection: position.axisDirection),
context: null,
scrollDelta: 0.0);
_handleScrollNotification(notification);
}
The child must extends ChangeNotifier and has an update method:
void update(ScrollMetrics metrics) {
assert(metrics != null);
_lastMetrics = metrics; // Save the metrics.
notifyListeners();
}
All this only works if a scroll controller has explicitly been defined for the scrollable (widget.child).
I am trying to draw a widget whenever a user presses the screen.
Currently I am doing this by storing a list of widgets and when ontapup is fired on the gesture i am adding to a list of widgets.
Widget build(BuildContext context) {
Widget draw = new Text("A");
List<Widget> children = new List<Widget>();
return new Scaffold(
appBar: new AppBar(
title: const Text('Heading'),
leading: new Icon(Icons.question_answer),
),
body: new GestureDetector(
onTapUp: (details) {
setState(() {
children.add(new Positioned(
left: details.globalPosition.dx,
top: details.globalPosition.dy,
child: draw,
));
});
},
child: new Stack(children: children)
...
So my code is working I am drawing the widget when I click but my problem is that when adding the new Positioned() to stack the position is based on the screen which does not include the appbar offset. Is there a way to get the stacks initial x/y position? Or is there a way to get the appbars height? How do I get a widgets position or height/width?
Ok for anyone else who has the same issue I needed to create my own widget and use
context.findRenderObject()
and
globalToLocal()
Just FYI global to local did not work while in the one solution I needed to make it its own widget.
To get the offset of a widget, you must get the renderObject, cast it as a RenderBox, and then convert it's local position to a global position. Like this:
#override
Widget build(BuildContext context) {
RenderBox renderBox = context.findRenderObject();
Offset widgetOffset = renderBox.localToGlobal(Offset.zero);
print("X: ${widgetOffset.dx}");
print("Y: ${widgetOffset.dy}");
}
If you need the position of a child widget, you can wrap that child in a LayoutBuilder, like this:
Container(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints box) {
RenderBox renderBox = context.findRenderObject();
Offset widgetOffset = renderBox.localToGlobal(Offset.zero);
print("X: ${widgetOffset.dx}");
print("Y: ${widgetOffset.dy}");
}
)
)