How to create a widget based on Screen Size?

This Article is posted by seven.srikanth at 11/17/2022 7:36:07 AM



Here is an example of how to create a widget based on Screen Size.
You can achieve this in multiple ways in flutter. In this example, I'm using Layout Builder. The other option is mediaQuery.
Here is the complete code for the above example.

import 'package:flutter/material.dart';
void main(List<String> args) {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @ override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyLayoutWidget(),
      ),
    );
  }
}
class MyLayoutWidget extends StatelessWidget {
  const MyLayoutWidget({
    super.key,
  });
  @ override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (p0, p1) {
        return Center(
          child: Container(
            color: Colors.red,
            height: p1.maxHeight / 3,
            width: p1.maxWidth / 3,
          ),
        );
      },
    );
  }
}
Thanks,
Srikanth

Tags: LayoutBuilder; ScreenSize;








0 Comments
Login to comment.
Recent Comments












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com