How can i fix my flutter app to be responsive in different screen sizes?

Question

I'm new to flutter I made a task manager app but the applications screen is overflowing on different phones. I'm not exactly sure where can I edit the code for a responsive pixel-perfect screen! It'll be helpful if someone explains it clearly!

Here's my homepage code:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/Background.jpg"),
              fit: BoxFit.cover,
              colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.1),
                BlendMode.darken,
              ),
            ),
          ),
          width: double.infinity,
          padding: EdgeInsets.symmetric(
            horizontal: 24.0,
          ),
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: 32.0,
                      bottom: 32.0,
                    ),
                                     

Deleted some unnecesarry bottom code cause

Answer 1

You can do it in many way such as:

1. Use LayoutBuilder like this:

LayoutBuilder(
  builder: (BuildContext ctx, BoxConstraints constraints) {
    // If the screen width >= 700i.e Wide Screen
    if (constraints.maxWidth >= 700) {
       ...
    }
    // If screen size is < 700
    else {
      ...
    }
  },
),

2. Simply use MediaQuery.of(context).size.width; like this:

Scaffold(
  body: Container(
    child: MediaQuery.of(context).size.width > 700
      ? LargeWidget()
      : SmallWidget()
  ),
)

Or many different ways