size_config 0.0.1

size_config: ^0.0.1 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:size_config_demo/size_config/size_extention.dart';
import "size_config/size_config.dart";


void main() async{
  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 MaterialApp(
      title: 'SizeConfig Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo SizeConfig'),
    );
  }
}

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(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context,BoxConstraints constraints){
          // initializing SizeConfig
          // reference height and width of UI design from Adobe XD,Figma or any other tool
          SizeConfig().init(context:context,
              safeAreaBox: constraints,
              referenceHeight: 800,
              referenceWidth: 360);
          return SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text("Container with responsive height and width percentage",style: TextStyle(fontSize: 20),),
                Container(
                  height: SizeConfigPercentage.relativeHeight(heightPercentage: 20),
                  width: SizeConfigPercentage.relativeWidth(widthPercentage: 30),
                  decoration: const BoxDecoration(
                    color: Colors.red,
                  ),
                ),
                const Text("Container with responsive height and width value",style: TextStyle(fontSize: 20),),
                // taking same values as above so you can see the difference between them
                Container(
                  height: SizeConfigValue.relativeHeight(height: 20),
                  width: SizeConfigValue.relativeWidth(width: 30),
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
                // let's see how values change with size in SizeConfig and SizeConfigPercentage
                SizeConfigValue.verticalSpacer(10),
                Text("Font Size SizeConfigValue: ${20.sp}",style: TextStyle(fontSize:20.sp),),


                SizeConfigPercentage.verticalSpacer(10),
                Text("Width SizeConfigValue: ${20.w}"),
                Text("Width SizeConfigPercentage: ${20.wp}"),
                SizeConfigValue.verticalSpacer(10),
                Text("Height SizeConfigValue: ${20.h}"),
                Text("Height SizeConfigPercentage: ${20.hp}"),

              ],
            ),
          );
        },
      )
    );

  }
}