CODEWITHSUNDEEP
flutterdart
CCP
CCP

Reputation: 1236

flutter, How to write precise responsive code from design

Is there any proper method to write responsive app without any additional package? I usually use MediaQuery but I feel it's not proper enough because it's hard to measure the size from figma since figma use number so i have to calculate it but im afraid everytime i calculate it's not precise and for the font size what is used to make it responsive?

var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;

Upvotes: 0

Views: 1276

Answers (1)

Yogita Kumar
Yogita Kumar

Reputation: 272

By using Sizer plugin we can make flutter app responsive.

https://pub.dev/packages/sizer

See the example below:

  1. add into pubspec.yaml

    dependencies: flutter: sdk: flutter sizer: ^2.0.15

  2. add import statement to code

    import 'package:sizer/sizer.dart';

  3. Wrap MaterialApp with ResponsiveSizer widget

main.dart

import 'package:flutter/material.dart';
import 'package:mediaquerydemo/sizer_demo.dart';
import 'package:sizer/sizer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
        builder: (context, orientation, deviceType) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: SizerDemo(),
          );
        }
    );
  }
}
  1. Your actual code where you can show UI

SizerDemo.dart

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

class SizerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final deviceInfo = MediaQuery.of(context);
    late var h = deviceInfo.size.height;
    late var w = deviceInfo.size.width;
    return Scaffold(
        appBar: AppBar(
          title: Text("Responsive App"),
        ),
        body: deviceInfo.orientation == Orientation.portrait
            ? SizedBox(
              width:30.w,
              height: 20.h,
              child: Container(
                child: Center(child: Text("HELLO", style: TextStyle(fontSize: 20.sp),)),
                color: Colors.green,
              ),
            )
            : SizedBox(
              width:30.w,
              height: 20.h,
              child: Container(
                child: Center(child: Text("World!", style: TextStyle(fontSize: 20.sp),)),
                color: Colors.red,
              ),
            )
    );
  }
}

Upvotes: 1

Related Questions