Comments (10)
DefaultTextStyle(
style: TextStyle(color: Theme.of(context).primaryColor ).apply(fontSizeFactor: zoomSize),
Where XXX is the ratio to give the font size (zoom factor).
Then you can do something like :
zoomSize = ResponsiveWrapper.of(context).equals(TABLET) ?zoomSize1.5:zoomSize;
zoomSize = ResponsiveWrapper.of(context).equals(2460) ?zoomSize1.5:zoomSize;
Or use a ratio of ResponsiveWrapper.of(context).scaledWidth/ResponsiveWrapper.of(context).screenWidth
Or what suit your need...
PS : don't use the same name for 2 breakpoints (Tablet in your example)
from responsiveframework.
Please don't close this post because I am testing for container, image etc. Thanks
from responsiveframework.
Hi,
Hopefully my answer will help you and save some time for the author to look at other issues ;)
I tested the minimal example in iPhone 11, iPhone SE and iPad as shown below screen. In the update text becomes too small for reading. My first question is how can I adjust iPad font size?
I would use a DefaultTextStyle, that adapt to the mediaQuery on the materialApp level. You can also use ResponsiveWrapperData.activeBreakpoint to change it, if if want a less progressive way.
For my second question: I already have an iOS app and trying to use your plugin to make my app more responsive. My app only for iPhone and iPad. I have a bottom navigation and my app in portrait mode. is your plugin covers flutter bottom navigator as well?
If you place the ResponsiveWrapper on top of you widget, it will scale or resize it. So for the whole app to be responsive, again, you can place it right under the materialApp.
https://github.com/Codelessly/ResponsiveFramework#scale-vs-resize
The bottomBar will have the same behavior has an appBar.
For my last question: In your example asset folders all the images width is 1080 px. Is there any reason for this? In my app there is a stack widget that has in some specified (250 x 150) container. How is your plugin deals with widget width and height as well as should I use all my images width to 1080?
Widget with specified size, will be resized or scale accordingly to the defined Breakpoint. The package will update the mediaQuery, so widget under the ResponsiveWrapper would see the updated mediaQuery corresponding to it.
Hope this help.
from responsiveframework.
@bounty1342 Thank you very much.
I am not sure if I use correctly the DefaultTextStyle. Here is my code and image. It looks normal. Also do you have any good example of how to use the "ResponsiveWrapper"?
debugShowCheckedModeBanner: false,
builder: (context, widget) => ResponsiveWrapper.builder(
BouncingScrollWrapper.builder(context, widget),
maxWidth: 1200,
minWidth: 450,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(450, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.autoScale(1000, name: TABLET),
ResponsiveBreakpoint.resize(1200, name: DESKTOP),
ResponsiveBreakpoint.autoScale(2460, name: "4K"),
],
background: Container(color: Color(0xFFF5F5F5))),
title: "MyApp",
theme: ThemeData(
fontFamily: "Ubuntu",
primaryColor: yellowColor,
),
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return DefaultTextStyle(
style: TextStyle(fontSize: 36, color: Colors.black),
child: Scaffold(
appBar: AppBar(
title: Text(
"Flutter App",
style: TextStyle(fontSize: 24),
),
),
body: Center(
child: Text(
"Hello World",
style: TextStyle(fontSize: 18, color: Colors.black),
),
),
),
);
}
}
from responsiveframework.
Thanks for the info, I will test it today.
2 breakpoints (Tablet in your example) was in your example main.dart file, I just copied and I will corrected now.
from responsiveframework.
I try but got error as follows:
ERROR:
I/flutter (19166): _zoomSize: 1.1458333333333333
======== Exception caught by widgets library =======================================================
The following assertion was thrown building MainInternet(dirty, dependencies: [InheritedResponsiveWrapper, _LocalizationsScope-[GlobalKey#a894b]], state: _MainInternetState#bf295):
'package:flutter/src/painting/text_style.dart': Failed assertion: line 813 pos 12: 'fontSize != null || (fontSizeFactor == 1.0 && fontSizeDelta == 0.0)': is not true.
...
...
...
====================================================================================================
CODE:
Widget _buildNoConnection(BuildContext context, langState) {
final _zoomSize =
(ResponsiveWrapper.of(context).scaledWidth) / (ResponsiveWrapper.of(context).screenWidth);
print("_zoomSize: $_zoomSize");
return ResponsiveWrapper(
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
ResponsiveBreakpoint.autoScale(2460, name: '4K'),
],
child: DefaultTextStyle(
style: TextStyle(color: Colors.black).apply(fontSizeFactor: _zoomSize),
child: Scaffold(
appBar: AppBar(
backgroundColor: ntmsDarkYellow,
title: Text(
langState.trans("mainTitle"),
style: TextStyle(fontSize: 24),
),
from responsiveframework.
You got to set a fontSize, the error is pretty strait-forward...
from responsiveframework.
Thanks, I checked Flutter PUB examples and corrected my UI as shown in blow code.
For font size I also used:
Example-1: fontSize: ResponsiveWrapper.of(context).isMobile ? 24 : 36,
Example-2: fontSize: ResponsiveWrapper.of(context).isMobile ? 14 : 22,
CODE:
Widget _buildNoConnection(BuildContext context, langState) {
final _zoomSize =
(ResponsiveWrapper.of(context).scaledWidth) / (ResponsiveWrapper.of(context).screenWidth);
return Scaffold(
appBar: PreferredSize(
preferredSize: Size(double.infinity, 66),
child: AppBar(
backgroundColor: ntmsDarkYellow,
title: Text(
langState.trans("mainTitle"),
style: TextStyle(
fontSize: ResponsiveWrapper.of(context).isMobile ? 24 : 36,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Colors.black)
.apply(fontSizeFactor: _zoomSize),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
_handleRefresh();
}),
])),
body: Center(
from responsiveframework.
What if i use a paragraph, how can I resize it according to the browser's size. I am building a webapp, so somewhere in the webapp , I am using a row in which first element is an image and then a text (paragraph). There's no way that the text will be adjusted in one single line, so is there any way of resizing and adjust the text according to the browser'size ?
from responsiveframework.
There is an autosizedtext package, you might want to look at.
from responsiveframework.
Related Issues (20)
- When breakpointsLandscape is defined, it will always ignore breakpoints. HOT 1
- [Feature Request]
- [BUGS] Button in ResponsiveRowColumnItem cannot expanded
- ResponsiveScaledBox in showDialog does not work properly
- Can we use the new version with GetX package?
- Error when using ReorderableListView inside ResponsiveScaledBox ( v1.1.1 and below) HOT 3
- User finger resize
- Font getting squeezed on iPhone 11 with iOS 16.0
- GoogleMap marker's tap area is misplaced on the web
- ResponsiveWrapper is not working HOT 3
- ResponsiveVisibility error HOT 2
- withNoTextScaling not working in letest version HOT 4
- Error null when defaultValue on ResponsiveValue not specified HOT 2
- type 'Null' is not a subtype of type 'double' in type cast HOT 2
- Positioning Issue with Draggable Widget HOT 4
- ResponsiveFramework + EasyLoading in builder
- WebView is not clickable when ResponsiveScaledBox is in place HOT 9
- Check if responsiveBreakpointsData has changed
- Dropdown menus not scaling down
- ResponsiveVisibility field visable invalid
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsiveframework.