responsive_pixel 2.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

Flutter Responsive Pixel! #

============================================== #

ENGLISH DOCUMENTATION #

============================================== #

The problem! #

This simple library is for people who are already faced with the simple problem of responsiveness in the mobile application.

An example:

Screenshots

Imagine that your UX Designer designed a canvas for you, with paddings and margins of 15, 20, 50 ... font size, etc. Based on his image.

However when you implement it, the following case happens:

Screenshots

Yes, in the device of the model designed it works, but in the version of the cell phone with lower resolution, it breaks.

How to solve? #

Just install the Responsive-Pixel library.

dependencies:
    responsive_pixel: ^2.0.0

That done, let's go to the code!

On your page implement this code in your build method.

Widget build(BuildContext context) {
    ResponsivePixelHandler.init(
        baseWidth: 480, //The width used by the designer in the model designed
    );
    ...

note: baseWidth is the width of the resolution used by your UX.

Example: if he used an Iphone XR the width would be 1125 px.

Now just use !! : D #

Use the ResponsivePixelHandler.toPixel method, passing the values ​​passed by your UX Designer.

margin: EdgeInsets.only(
    top: ResponsivePixelHandler.toPixel(10, context),
    left: ResponsivePixelHandler.toPixel(20, context),
),

or use ResponsivePixelHandler.toFont, to set the font's pixel size.

child: Text('texto em flutter', style: TextStyle(
    fontSize: ResponsivePixelHandler.toPixel(10, context),
)),

done! :D

Screenshots

Accessibility #

Yes, the Responsive Pixel controls when the mobile device defines that it will have a font larger than the default. You can limit it to a minimum and maximum value.

In the ResponsivePixelHandler.toFont method we have two more properties, which we can use for these specific cases.

minResponsivePixel and maxResponsivePixel

Example: I have a font size, but I want small devices to never be smaller than 8 px.

Text('Example', style: TextStyle(
    fontSize: ResponsivePixelHandler.toFont(50, context, 
        minResponsivePixel: 40, 
        maxResponsivePixel: 60
    ),
)),

obs: If you want to set the value fixed, just don't pass the minimum and the maximum.

Platform #

AndroidIOSWeb
SupportYesYesNot tested

Contributors #

  • Rafael Kenji Nagai

Documentation #

Git Hub Documentation Flutter Package

# # # #

============================================== #

DOCUMENTAÇÃO EM PORTUGUÊS #

============================================== #

O problema! #

Esta simples biblioteca é para as pessoas que já se deparam com o simples problema de responsividade na aplicação mobile. Um exemplo:

Screenshots

Imagine que o seu UX Designer desenhou uma tela para você, com paddings e margins de 15, 20, 50... tamanho de fonte, etc. Com base na imagem dele.

Porém quando você implementa, acontece o seguinte caso:

Screenshots

Sim, no aparelho do modelo desenhado dá certo, porem na versão do celular com resolução menor, ele quebra.

Como resolver? #

Basta instalar a library Responsive-Pixel.

dependencies:
    responsive_pixel: ^2.0.0

Feito isto, bora para o codigo!

No sua page implemente este código no seu build.

Widget build(BuildContext context) {
    ResponsivePixelHandler.init(
        baseWidth: 480, //A largura usado pelo designer no modelo desenhado
    );
    ...

obs: o baseWidth é a largura da resolução usada pelo seu UX quando desenhou as telas.

Exemplo: se ele usou um Iphone XR a largura seria 1125 px.

Agora basta usar!! :D #

Utilize o método ResponsivePixelHandler.toPixel, passando os valores passados pelo seu UX Designer.

margin: EdgeInsets.only(
    top: ResponsivePixelHandler.toPixel(10, context),
    left: ResponsivePixelHandler.toPixel(20, context),
),

ou use ResponsivePixelHandler.toFont, para definir o tamanho em pixel da font.

child: Text('texto em flutter', style: TextStyle(
    fontSize: ResponsivePixelHandler.toPixel(10, context),
)),

e pronto!

Screenshots

Acessibilidade #

Sim, o Responsive Pixel controla quando o aparelho mobile define que vai ter uma fonte maior do que o default. Podendo limitar em um valor minimo e máximo.

No metodo ResponsivePixelHandler.toFont temos duas propriedades a mais, que podemos usar para estes casos específicos.

minResponsivePixel e maxResponsivePixel

Exemplo: Tenho uma fonte, mas quero que em aparelhos pequenos nunca fiquem menores que 8 px.

obs: Se quiser fixar o valor, basta não passar o minimo e o máximo.

Plataforma #

AndroidIOSWeb
SuporteSimSimNão testado

Colaboradores #

  • Rafael Kenji Nagai

Documentação #

Git Hub Documentation Flutter Package

[0.0.1] - TODO: Add release date. #

[1.0.0] - Release the library. #

[1.0.1] - Fix readme. #

[1.0.4] - Adjust number version. #

[2.0.0] - Refactor method to calculate the responsive pixel and developed to font size as well. #

[2.0.1] - Fix images in readme. #

[2.0.2] - Fix images in readme. #

example/lib/main.dart

import 'package:example/ResponsivePage/example_without_responsive_page.dart';
import 'package:flutter/material.dart';
import 'package:responsive_pixel/flutter_responsive_pixel.dart';
import 'ResponsivePage/example_responsive_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Responsive Pixel',
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(title: Text('Responsive Pixel'),),
        body: Column(
          children: <Widget>[
            FlatButton(
              color: Colors.redAccent,
              child: Text('Normal page'),
              onPressed: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(builder: (context) => ExampleWithoutResponsivePage())
                );
              },
            ),
            FlatButton(
              color: Colors.greenAccent,
              child: Text('Page with Reponsive Pixel'),
              onPressed: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(builder: (context) => ExampleResponsivePage())
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  responsive_pixel: ^2.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:responsive_pixel/responsive_pixel.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • responsive_pixel that is a package requiring null.

Health issues and suggestions

Document public APIs. (-1 points)

6 out of 6 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/responsive_pixel.dart.

Run flutter format to format lib/responsive_pixel.dart.

Maintenance issues and suggestions

Homepage URL doesn't exist. (-20 points)

At the time of the analysis the homepage field https://github.com/Dev-Pub was unreachable.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test