调整 Flutter 中垂直和水平方向响应的视图

Question

我做了这个布局，但我不知道如何为所有设备制作响应式视图。

我把我的两个输出图像如下。

后退注销箭头（右上）和图片（中）。

我给注销箭头固定边距。并调整中心对齐图像的视图。

这是垂直的

这是横向的

这是我的设计代码。

  import 'dart:io';
  
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:toast/toast.dart';
  
  import 'CurvedPainter.dart';
  
  void main() => runApp(Profile());
  
  class Profile extends StatelessWidget {
    const Profile({Key? key}) : super(key: key);
  
    static const String _title = 'Profile';
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        title: _title,
        home: MyStatefulProfile(),
      );
    }
  }
  
  class MyStatefulProfile extends StatefulWidget {
    const MyStatefulProfile({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() => MyProfileState();
  }
  
  class MyProfileState extends State<StatefulWidget> {
    @override
    Widget build(BuildContext context) {
      final _width = MediaQuery.of(context).size.width;
      final _height = MediaQuery.of(context).size.height;

return Scaffold(
  body: Padding(
    padding: EdgeInsets.all(0),
    child: Stack(
      // use for adjust views stack wise in app.
      alignment: Alignment.center,
      children: [
        Container(
          decoration: new BoxDecoration(
            color: const Color(0xFFFFD700),
          ),
          child: new Stack(
            children: <Widget>[
              new CustomPaint(
                size: Size(_width, _height),
                painter: CurvedPainter(),
              ),
            ],
          ),
        ),
        new InkWell(
          onTap: () {
            print('Logout Clicked');
            logout();
          },
          child: new Container(
            height: 50,
            width: 50,
            alignment: Alignment.topRight,
            margin: const EdgeInsets.fromLTRB(290, 0, 0, 430),
            child: Icon(
              Icons.logout,
              color: Colors.black,
            ),
          ),
        ),
        Container(
          height: 150,
          width: 150,
          margin: const EdgeInsets.fromLTRB(0, 0, 0, 150),
          decoration: BoxDecoration(
              image: DecorationImage(
                image: new AssetImage('assets/images/ic_logo_main.png'),
                fit: BoxFit.fitHeight,
              ),
              shape: BoxShape.rectangle),
        ),
      ],
    ),

 
  ),
);
}

请帮忙。

Answer 1

使用 responsive_builder or responsive_framework 个库。

whit responsive_builder 你可以这样做 return 每个屏幕的另一个小部件 tyoe :

ResponsiveBuilder(
    builder: (context, sizingInformation) {
      // Check the sizing information here and return your UI
          if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
          return Container(color:Colors.blue);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
          return Container(color:Colors.red);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.watch) {
          return Container(color:Colors.yellow);
        }

        return Container(color:Colors.purple);
      },
    },
  );
}

Answer 2

在使用 Stack 时使用 Positined、Align 等对齐的小部件来放置子项。

对于log out button可以是

   Positioned(
              right: 20,
              top: 20,
              child: InkWell(
                onTap: () {
  .....

或

       Align(
              alignment: Alignment(.9, -.9),
              child: InkWell(
                onTap: () {
                  print('Logout Clicked');
                  // logout();
                },

而 ic_logo_main

         Align(
              alignment: Alignment.center,
              child: Container(
                height: 150,
                width: 150,
                // margin: const EdgeInsets.fromLTRB(0, 0, 0, 150), // not needed
                decoration: BoxDecoration(
                    color: Colors.red,
                    image: DecorationImage(
                      image: new AssetImage('assets/images/ic_logo_main.png'),
                      fit: BoxFit.fitHeight,
                    )

为 Stack 小部件内的每个子元素包装定位小部件。

更多关于

调整 Flutter 中垂直和水平方向响应的视图

Adjust Views Responsive in Flutter with Vertically and Horizontally Direction

android

scaffold

dart

flutter