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
          )
        ),
      )
    );
  }
}

About me

• Jacob Moura [email protected]

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.