How can I adjust iPad font size?

[NTMS2017]

Hi,

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?

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?

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?

Thanks

[bounty1342]

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.

[NTMS2017]

@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),
          ),
        ),
      ),
    );
  }
}

[bounty1342]

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)

[NTMS2017]

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.

[NTMS2017]

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),
                  ),

[bounty1342]

You got to set a fontSize, the error is pretty strait-forward...

[NTMS2017]

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(

[NTMS2017]

Please don't close this post because I am testing for container, image etc. Thanks

[mrmayurgithub]

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 ?

[bounty1342]

There is an autosizedtext package, you might want to look at.