responsive_container

Description:

responsive container

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:
copied to clipboard

Import package into your code

//...
import 'package:responsive_container/responsive_container.dart';
//...
copied to clipboard
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
)

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

copied to clipboard

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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter