My Situation
I created this class for my own TextStyles (example code snippet)
class CustomTextStyles {
double textFactor = AppStorage.read(AppStorage.textSizeFactor) ?? 1.0;
// first custom text style
late TextStyle customTextStyle1 = GoogleFonts.roboto(
fontSize: 36 * textFactor,
fontWeight: FontWeight.w700
);
}
Calling it somewhere like
Text("Hello World", style: CustomTextStyles().customTextStyle1)
My Problem
In the SettingsPage the user changes the textFactor from 1.0 to 1.5, so the fontSize should increase.
This works, and the text is getting bigger, when navigating to a new page.
But I want to refresh all current open pages, after changing the textFactor so, when navigating back, the text gets bigger 1.5 times.
For example to the settings page I get by navigating:
From the Drawer Button of any page -> To the Drawer -> To the SettingsPage
What should happen:
All Text Widgets in the settingsPage, in the Drawer and in the Page where we called the Drawer should increase their fontSize by 1.5.
How can I achieve that?
Do I really need to wrap all of the used TextStyles (over 100+ occurrences in 36+ files) in Obx(() => Text(...))?
Related
Text widget in Flutter dose not support a special charterers like &, where sometimes this charterer comes like "first & second" from the database, or """ should be ".
Text widget should read/convert these characters automatically. I have already fixed by following lines, But I need to put this solution in all Text widgets I have in my app.
Is it possible to give all Text widgets the possibility to read these special charterers directly in main function in runAPP or "MaterialApp" without putting the following lines in all Text widgets the app has?
final document = parse(htmlString);
final String parsedString = parse(document.body.text).documentElement.text;
Use this package flutter_html and try as follows:
Html(data: htmlString, style: {
"body": Style(
fontSize: FontSize(18),
color: Colors.black,
fontWeight: FontWeight.normal)
}),
I am developing an app in flutter with few screen I want to add AppBar in home screen and want that appbar to be fixed in all screen, but in the dummy code which i have written the complete screen is getting replaced by that.
Below is the screen
HomeScreen - here i have created appbar
When I click on AddPolicy Button, i get that screen where right now i just have a text but the complete screen gets replaced as below, but I want the header appBar should be fixed. How can I achieve this.
Below is the code
homepage - https://github.com/lodha13/samkit/blob/main/lib/screens/home.dart
AddPolicy page - https://github.com/lodha13/samkit/blob/main/lib/screens/add_policy.dart
You have two opptions:
have a global widget for appbar and use it on each different page,
or
You can have one Scaffold in your main.dart and instead of generating a new one for each page, only change the body parameter using setState. for example:
// have as many widget as you want for each page
const body1 = Text("body1"); //just a simple example, you can change it to whatever you want.
const body2 = Text("body2");
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: handleBody(selectedIndex)
);
then you can have a function to handle bodies:
handleBody(int index){ // you can pass different input for body selection I have used an int for simplicity
if(index == 1){return body1;}
if(index ==2) {return body2;}
// and so on
}
now with changing the selectedIndex you can show different bodies. Personally, I prefer to have a list of widgets and select one of them based on selectedIndex.
I am new to flutter and trying to build a text field with basic options just as in word (underlineing, changing fontsize and weight,...)
I was able to write a code for changing the font size and I tried the same for font weight, but i wasn´t able to make it work.
As I am also new to Stackoverflow I am having troubles with inserting my working code properly...
So my question is, if you could share your version of changing the fontweight of a text in a textfield via buttons just like in word.
Thank you!
Firstly, use stateful widget, then make variable:
bool isBold = false;
Then use a Text widget like this:
Text(‘hello’, style: TextStyle(fontWeight: isBold ? FontWeight.bold : FontWeight.normal))
Next you need a button for user to toggle fontweight option:
MaterialButton(onPressed: () => setState(() => isBold = !isBold))
You can change fontweight of the textfield by using style property of Textfield
TextField(
....
style: fontweight=Fontweight.bold),
...
I have a lot of screens that have an app bar, I always have to set the style for the app bar each time I create a new screen, it so boring. So, anyone knows how to set a custom app bar text style or if there is a solution to this problem?
So you can do is create a method Method as mentioned below and then pass the value to it and later you just call these method where you want just check the code below:
you make another helper_widgets.dart and add the below method so that you can access it everywhere.
Widget appBar(String title,/* you can pass various paramenters to appbar text customization such as fontsize and many more*/ ) {
return AppBar(
title: Text(
title,
style: TextStyle(color: Colors.red, fontSize: 14),
),
);
}
and later just call it in the AppBar Widget
Scaffold(
appBar: appBar('Sample Application'),
);
Let me know if it works.
I am trying to add an editable textbox to the canvas in Flutter, that will bring up the keyboard once selected.
I am using a custom painter to print text to a canvas (shown in the code below). Is it possible to make this text editable, or add a text input element over the canvas at a particular offset?
import 'package:flutter/material.dart' as Material;
class CanvasPainter extends Material.ChangeNotifier implements Material.CustomPainter {
..
void paint(Canvas canvas, Size size) {
Material.TextSpan textSpan = new Material.TextSpan(style: new material.TextStyle(color: new Maaterial.Color.fromRGBO(r, g, b, 1.0), fontSize: font.fontSize.toDouble(), fontFamily: 'Roboto'),text: "Hello there");
Material.TextPainter tp = new Material.TextPainter( text: textSpan, textAlign: TextAlign.left, textDirection: TextDirection.ltr, textScaleFactor: ratio);
tp.layout();
tp.paint(canvas, new Offset(50.0,50.0));
}
}
Not the best solution, but I could solve similar issue with OverlayEntry.
Steps:
create an OverlayEntry, put a (hidden) TextField into it with a FocusNode and TextEditController.
after added the overlay entry, request focus on the focusNode, so the keyboard will open.
Add an onChanged to the TextField, and notify the painter somehow (e.g. valueNotifier) on text change.
In the TextPainer use the TextEditController.text value