Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
auto_size_widget cover
Package detailsv0.0.4

auto_size_widget

A Flutter widget that can resize the child widget by dragging the widget corner.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
153
Likes
38
Pub points
130

Install package

flutter pub add auto_size_widget

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The auto_size_widget package provides a Flutter widget that enables dynamic resizing of its child by dragging the corner, allowing intuitive layout adjustments. It is designed for interactive UIs where users need to manually resize elements within the app. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it versatile for cross-platform development. It integrates seamlessly with existing Flutter layouts and enhances user experience through direct manipulation.

Use cases

  • Interactive UI design
  • Dynamic layout adjustment
  • User-driven widget resizing
  • Cross-platform responsive interfaces
  • Prototyping interactive layouts
  • Real-time UI customization

Key features

  • Corner drag-to-resize functionality
  • Cross-platform compatibility
  • Easy integration with Flutter widgets
  • Supports all major platforms
  • Minimal setup required
  • Responsive layout behavior

Suitable for

  • UI designers prototyping interactive layouts
  • Developers building customizable dashboards
  • Apps requiring manual widget resizing
  • Cross-platform applications with dynamic UIs
  • Educational or creative tools with interactive elements

Considerations

  • May conflict with other gesture detectors
  • Performance impact with complex children
  • Requires careful handling in nested layouts
  • Not suitable for static or read-only UIs
  • Limited to single-child resizing without additional logic
  • Potential accessibility challenges with touch gestures

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Auto Size Widget

A Flutter widget that can resize the child widget by dragging the widget corner.

Installation

  1. Add the latest version of the package to your pubspec.yaml (and run 'dart pub get'):
dependencies:
    auto_size_widget: ^0.0.3
  1. Import the package and use it in your Flutter app.
import 'package:auto_size_widget/auto_size_widget.dart';

Example

  1. To resize both the height and the width of the widget

initialWidth and initialHeight should be different from maxWidth and maxHeight respectively.

AutoSizeWidget(
  initialWidth: 120,
  initialHeight: 120,
  maxWidth: 320,
  maxHeight: 320,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5)),
  child: Image.network(
    'https://docs.flutter.dev/assets/images/dash/early-dash-sketches2.jpg',
    fit: BoxFit.fill,
  ),
),
  1. To resize the height of the widget

initialWidth and maxWidth should be same to ensure that the width does not change on resize.

AutoSizeWidget(
  initialWidth: 250,
  initialHeight: 120,
  maxWidth: 250,
  maxHeight: 280,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5),
  ),
  child: const SelectableText(
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
  ),
),
  1. To resize the width of the widget

initialHeight and maxHeight should be same to ensure that the height does not change on resize.

AutoSizeWidget(
  initialWidth: 150,
  initialHeight: 200,
  maxWidth: 300,
  maxHeight: 200,
  boxDecoration: BoxDecoration(
    border: Border.all(width: 1, color: Colors.grey),
    borderRadius: BorderRadius.circular(5)),
  child: TextFormField(
    keyboardType: TextInputType.multiline,
    maxLines: 3 * 120,
    textAlign: TextAlign.start,
    decoration: const InputDecoration(
      focusedBorder: InputBorder.none,
      contentPadding:
        EdgeInsets.symmetric(vertical: 11, horizontal: 15),
      hintText: "Enter text here"
    ),
  ),
),

Categories

Layout & Overlay

Source repository

Projects using this package

No data available yet.