Как я могу исправить мое флаттер-приложение, чтобы оно реагировало на разные размеры экрана?

Question

Я новичок в флаттере. Я сделал приложение диспетчера задач, но экран приложений переполняется на разных телефонах. Я не совсем уверен, где я могу отредактировать код для отзывчивого идеального экрана! Будет полезно, если кто-нибудь объяснит это ясно!

Вот код моей домашней страницы:

        @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,
                    ),
                                     

Удален некоторый ненужный нижний код, причина

Answer 1

Вы можете сделать это разными способами, например:

1. Использовать LayoutBuilderкак это:

      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. Просто используйте MediaQuery.of(context).size.width;как это:

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

Или много разных способов