size_config 2.0.2

Building responsive UI made easy with extension that size_config package provide.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return SizeConfigInit(
      referenceHeight: 900,
      referenceWidth: 360,
      child: MaterialApp(
        title: 'Size Config Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Size Config Demo'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // using .h and .w for responsive width and height
          Image.asset(
            "assets/image.png",
            height: 200.h,
            width: 200.w,
            scale: 0.5,
          ),
          // using .sp for responsive font size
          Text(
            "Login",
            style: TextStyle(fontSize: 22.sp),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: InputDecoration(
                  hintStyle: TextStyle(fontSize: 12.sp),
                  constraints: BoxConstraints(maxWidth: 200.w, maxHeight: 30.h),
                  hintText: "Enter Email"),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              style: TextStyle(fontSize: 12.sp),
              obscureText: true,
              decoration: InputDecoration(
                  hintStyle: TextStyle(
                    fontSize: 12.sp,
                  ),
                  constraints: BoxConstraints(maxWidth: 200.w, maxHeight: 30.h),
                  hintText: "Enter Password"),
            ),
          ),
          MaterialButton(
            onPressed: () {
              print("Logged in successfully");
            },
            height: 20.h,
            minWidth: 100.h,
          )
        ],
      ),
    ));
  }
}