adaptive_ui_layout 1.0.1 copy "adaptive_ui_layout: ^1.0.1" to clipboard
adaptive_ui_layout: ^1.0.1 copied to clipboard

Adaptive UI Layout helps implement a responsive layout by providing helper widgets and extensions

Adaptive UI Layout #

A Flutter package for creating responsive layouts, widgets, and managing dimensions easily. This package is designed to simplify the process of building responsive Flutter applications by providing a set of utilities and widgets that adapt to different screen sizes and orientations.

Features #

  • Responsive Layouts: Easily create responsive designs that look great on various screen sizes.
  • Dimension Management: Simplify handling dimensions and spacing with predefined constants and utilities.
  • Planned Feature: Custom widgets for further enhancing the responsiveness of your UI components.

Installation #

Add the following line to your pubspec.yaml file:

dependencies:
  adaptive_ui_layout: ^1.0.0

then run flutter pub get

Usage #

Add ResponsiveLauout to your MaterialApp or CupertinoApp. Define your own UI screen size.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      builder: (context, child) => ResponsiveLayout(
        designSize: Size(360, 800),
        builder: (context) {
        return child!;
      }),
      home: const MyHomePage(title: 'Flutter Responsive Layout'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 115,
              width: 115,
            ),
            20.hs, // horizontal spacer
            Container(
              color: Colors.orange,
              height: 115.h, // ui dependent height
              width: 115.w, // ui dependent width
            )
          ],
        ),
      ),
    );
  }
}

Useful APIs: #

API Description Example Usage
.w Design dependent width Container(width: 112.w)
.h Design dependent height Container(height: 112.h)
.ws Design dependent SizedBox for horizontal spacer Row(children:[112.ws, Container()])
.hs Design dependent SizedBox for vertical spacer Column(children:[112.hs, Container()])
.sp For Text Scaling Text('prcryx', style:TextStyle(fontSize: 16.sp))

Contribution #

We welcome contributions! Feel free to open issues, submit pull requests, or provide feedback.

License #

This project is licensed under the BSD Zero Clause License - see the LICENSE file for details.

4
likes
150
points
26
downloads

Publisher

unverified uploader

Weekly Downloads

Adaptive UI Layout helps implement a responsive layout by providing helper widgets and extensions

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on adaptive_ui_layout