Building Responsive UIs

import 'package:flutter/material.dart';

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Screen size: ${MediaQuery.of(context).size.width} x ${MediaQuery.of(context).size.height}",
        ),
      ),
    );
  }
}

<div class="example">
  <h3>Example: Using LayoutBuilder to adapt layout based on screen size</h3>
  <div class="codeBlock" data-language="dart">
    <pre><code>import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return Column(
            children: [
              Text('Mobile View'),
              Text('Content here'),
            ],
          );
        } else {
          return Row(
            children: [
              Text('Desktop View'),
              Text('Content here'),
            ],
          );
        }
      },
    );
  }
}</code></pre>
  </div>
</div>

OrientationBuilder(
  builder: (context, orientation) {
    return Container(
      color: orientation == Orientation.portrait
          ? Colors.blue
          : Colors.green,
      child: Center(
        child: Text(
          "Orientation: ${orientation.name}",
        ),
      ),
    );
  },
)

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return Text("Mobile View");
        } else if (constraints.maxWidth < 960) {
          return Text("Tablet View");
        } else {
          return Text("Desktop View");
        }
      },
    );
  }
}

import 'package:flutter/material.dart';

class ResponsiveGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: MediaQuery.of(context).size.width < 600 ? 1 : 2,
      children: List.generate(4, (index) {
        return Card(
          child: Center(child: Text("Item $index")),
        );
      }),
    );
  }
}

ResponsiveBuilder(
  builder: (context, sizingInformation) {
    if (sizingInformation.screenSize == ScreenSize.small) {
      return Text('Small screen');
    } else if (sizingInformation.screenSize == ScreenSize.medium) {
      return Text('Medium screen');
    } else {
      return Text('Large screen');
    }
  },
)

ResponsiveBuilder(
  breakpoints: {
    'mobile': const BoxConstraints(maxWidth: 600),
    'tablet': const BoxConstraints(minWidth: 601, maxWidth: 1024),
    'desktop': const BoxConstraints(minWidth: 1025),
  },
  builder: (context, sizingInformation) {
    return Text('Current size: ${sizingInformation.screenSize}');
  },
)

Row(
  children: [
    Container(
      color: Colors.green,
      width: 100,
    ),
    Flexible(
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
  ],
)

class AdaptiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return Column(
            children: [
              Text('Mobile View'),
              Text('Content here'),
            ],
          );
        } else {
          return Row(
            children: [
              Text('Desktop View'),
              Text('Content here'),
            ],
          );
        }
      },
    );
  }
}

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final orientation = MediaQuery.of(context).orientation;
    return Container(
      child: orientation == Orientation.portrait
          ? Text('Portrait Mode')
          : Text('Landscape Mode'),
    );
  }
}

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

Widget build(BuildContext context) {
  return PlatformWidget(
    android: (context) => MaterialButton(
      onPressed: () {},
      child: Text("Android Button"),
    ),
    ios: (context) => CupertinoButton(
      onPressed: () {},
      child: Text("iOS Button"),
    ),
  );
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Text Demo',
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(
          headlineLarge: TextStyle(fontSize: 32.0),
          titleMedium: TextStyle(fontSize: 16.0),
          bodyLarge: TextStyle(fontSize: 14.0),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Responsive Text Example")),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Headline Large", style: Theme.of(context).textTheme.headlineLarge),
              SizedBox(height: 10),
              Text("Title Medium", style: Theme.of(context).textTheme.titleMedium),
              SizedBox(height: 10),
              Text("Body Large", style: Theme.of(context).textTheme.bodyLarge),
            ],
          ),
        ),
      ),
    );
  }
}

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

void main() {
  runApp(
    DevicePreview(
      enabled: true,
      builder: (context) => MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useRootNavigator: false,
      home: Scaffold(
        appBar: AppBar(title: Text('Responsive UI')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}