Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von responsive
Paketdetailsv0.3.11+11

responsive

Bieten Sie eine einfache Möglichkeit zur Erstellung von responsiven Benutzeroberflächen für Flutter-Anwendungen auf Mobilgeräten, Desktops und Web bereit, die unterschiedliche Widget-Größen je nach Bildschirmgröße und Geräteorientierung zulassen.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
75
Likes
66
Pub-Punkte
140

Paket installieren

flutter pub add responsive

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das responsive-Paket vereinfacht die Erstellung anpassungsfähiger Benutzeroberflächen in Flutter-Anwendungen für mobile, Desktop- und Web-Plattformen. Es ermöglicht Entwicklern, basierend auf Bildschirmgröße und Geräteorientierung unterschiedliche Widget-Größen und Layouts zu definieren, um konsistente und optimale UI-Erlebnisse sicherzustellen. Mit intuitiven APIs vereinfacht es das responsive Design, ohne komplizierte bedingte Logik oder manuelle Media-Query-Behandlung zu erfordern. Das Paket ist besonders nützlich für Anwendungen, die mehrere Formfaktoren mit unterschiedlichen Bildschirmabmessungen ansprechen.

Anwendungsfälle

  • Plattformübergreifende App-Entwicklung
  • Anpassbare Layouts für Mobilgeräte und Desktop
  • Dynamische UI-Größenanpassung basierend auf der Bildschirmorientierung
  • Skalierbare Web-Oberflächen erstellen
  • Responsive Design für Tablets und große Bildschirme

Hauptmerkmale

  • Automatische Bildschirmgrößen-Erkennung
  • Orientierungsbezogenes Widget-Größenanpassung
  • Einfache API für responsive Widgets
  • Unterstützung für alle wichtigen Flutter-Plattformen
  • Eingebaute Breakpoints für gängige Geräte

Geeignet für

  • Entwickler, die mehrplattformfähige Flutter-Apps erstellen
  • Teams, die Konsistenz der Benutzeroberfläche über Geräte hinweg priorisieren
  • Projekte, die dynamische Layoutanpassungen erfordern

Hinweise

  • Kann Tests auf mehreren Gerätearten erfordern
  • Leistungsbeeinträchtigung durch übermäßige verschachtelte responsive Widgets
  • Eingeschränkte Anpassung über vordefinierte Breakpoints hinaus

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

responsive

build status Pub support

Provide a easy way to make responsive UI for Flutter Applications in mobile, desktop and web, allow different widget size for each screen size and device orientation..

Made by Marvin Quevedo and [Víctor Guardiola](mailto:victor.guardiola@gmail.com) of FlutterEs Community.

Este paquete ha sido creado por la comunidad de Flutter en Español, si deseas ser parte de nosotros, puedes visitar cualquiera de estos links:

Facebook

Slack

Twitter

www.flutter-es.io

Telegram

portrait view

landscape view

Video example

Add dependency
dependencies:
  responsive: 0.2.3

Usage

You have two ways of use it:

You can use the ReponsiveRow widget and the FlexResponsive widget to make the layout

or

you can use the static method Responsive.calcColumns to assign the correct number of columns to a widget like a GridView.

Easy to use

import 'package:flutter/material.dart';
import 'package:responsive/flex_widget.dart';
import 'package:responsive/responsive_row.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            ResponsiveRow(
              columnsCount: 12,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: <Widget>[
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 4,
                  xsOffset: 2,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  xsLandOffset: 0,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.indigo,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.lime,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.teal,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.deepOrange,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.grey,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.black,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.brown,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.cyan,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Kategorien

Reaktive Benutzeroberfläche

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.