Responsive Container

Use percentage for width and height values in any Widget

Getting Started

  • Add the dependency to your "pubspec.yaml" file.
  dependencies:
    flutter:
      sdk: flutter
    responsive_container:
  • Import package into your code
//...
import 'package:responsive_container/responsive_container.dart';
//...

Usage

  • You can set the widget height and width percentages from 0 to 100 (double)
ResponsiveContainer(
    heightPercent: 50.0, //value percent of screen total height
    widthPercent: 50.0,  //value percent of screen total width
    child: Container(color: Colors.red,), //any widget
)

Full exemple

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Responsive Container"),),
        body: Center(

          child: ResponsiveContainer(
            heightPercent: 50.0, //value percent of screen total height
            widthPercent: 50.0,  //value percent of screen total width

            child: Container(color: Colors.red,), //any widget
          )
        ),
      )
    );
  }
}

alt text

About me

For news on the world Flutter -> flutterando.com.br.

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Libraries

responsive_container

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]