flutter_responsive_ui 0.1.2

This flutter package allows you to resize font responsively and get to know what kind of device the app is running on.

Flutter responsive UI

This flutter package allows you to resize font responsively and get to know what kind of device the app is running on.

Getting Started

To use this package, add flutter_responsive_ui as a dependency in your pubspec.yaml file.

You can use this package in multiple cases. You can get the type of the device that you're running your application on ! You can find if it's a mobile, a tablet or a desktop ! You can even make the deference between a small tablet and a large tablet !

You can also make your UI and font size responsive depending on the device you're running the app on. By default, you'll need to develop on a mobile emulator because the default scale factor are based on small screens. If you want to directly develop on tablet or desktop emulators, feel free to use the init function to set the scale factors you want.

Functions

You can easily know on what device you're on using : isMobile(), isTablet(), isSmallTablet(), isLargeTablet() and isDesktop().

To get a responsive double, use getResponsiveSize() and to get a smaller double, use getSmallerResponsiveSize(). And to get the amount of column on a GridView, you can use responsiveGridColumnCount().

Example

import 'package:flutter/material.dart';
import 'package:flutter_responsive_ui/flutter_responsive_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// You can init all the parameters you want here :
    ResponsiveSize.initValues(
      desktopScaleFactor: 4,
      smallTabletSmallerScaleFactor: 1.17,
    );
    return MaterialApp(
      home: MyHomePage(title: 'Responsive UI'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// You can use the other functions to test if you're on big or small tablet, or just tablet or on desktop
            ResponsiveSize.isMobile(context: context)
                ? Text("We're on mobile")
                : Text("We're not on mobile"),

            /// Here we use the function getResponsiveSize to change the size of the text depending on the device
            Text("This text has a responsive font size !",
                style: TextStyle(
                    fontSize: ResponsiveSize.getResponsiveSize(context: context, size: 15))),

            /// Here is the same as above, but the scale factor will be lower
            Text("This text has a smaller responsive font size !",
                style: TextStyle(
                    fontSize:
                        ResponsiveSize.getSmallerResponsiveSize(context: context, size: 15))),
            Container(
              height: ResponsiveSize.getResponsiveSize(context: context, size: 500),
              child: GridView.count(
                crossAxisSpacing: ResponsiveSize.getResponsiveSize(context: context, size: 10),
                mainAxisSpacing:
                    ResponsiveSize.getSmallerResponsiveSize(context: context, size: 10),

                /// Here we use the responsive package to get a responsive cross axis column numbers
                /// We can also specify the starter amount (2 by default on mobile) using the "startColCount" parameter
                /// to get more columns if needed.
                crossAxisCount:
                    ResponsiveSize.responsiveGridColumnCount(context: context),
                children: [
                  Container(
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                          "This grid view has a responsive crossAxisCount !"),
                    ),
                  ),
                  Container(
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                          "This grid view has a responsive crossAxisCount !"),
                    ),
                  ),
                  Container(
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                          "This grid view has a responsive crossAxisCount !"),
                    ),
                  ),
                  Container(
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                          "This grid view has a responsive crossAxisCount !"),
                    ),
                  ),
                  Container(
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                          "This grid view has a responsive crossAxisCount !"),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}