如何使用堆栈和定位小部件在Flutter中创建真正响应式设计

u91tlkcl 于 2023-02-05 发布在 Flutter

关注(0)|答案(1)|浏览(119)

我想使用Stack和Positioned小部件，认为这将是一个响应式设计的默认情况下，我甚至尝试了Sizer插件，但由于某种原因，我无法创建一个真正的响应式设计，我的小部件在不同的屏幕上到处都是
请看一下我的代码

@override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      children: [
        Googlelutter(mapKey: _mapKey, osmController: osmController),
        Positioned(
          top: 60.0,
          left: 0.0,
          right: 0.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Consumer<AppData>(
                  builder: (ctx, dsc, child) => (ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(50))),
                        backgroundColor: dsc.driverStatusClr),
                    // color: dsc.driverStatusClr,
                    onPressed: () async {
                      if (isDriverAvailable != true) {
                        isDriverAvailable = true;
                        makeDriverOnlineNow();
                        getLocationLiveUpdates();

                        Provider.of<AppData>(context, listen: false)
                            .buttonOnline(Colors.green.shade300, "Online");

                        await UserSimplePrefences.setButtonStatus(false);

                        // });
                        displayToastMessage("You are Online now", context);
                      } else {
                        Provider.of<AppData>(context, listen: false)
                            .buttonOnline(Colors.black54, "Offline");
                        driverOffline();
                        IsolateNameServer.removePortNameMapping(_isolateName);
                        BackgroundLocator.unRegisterLocationUpdate();
                        displayToastMessage("You are Offline now", context);
                        isDriverAvailable = false;

                        await UserSimplePrefences.setButtonStatus(true);

                        onStop();
                      }
                    },
                    child: Padding(
                      padding: EdgeInsets.all(17),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            dsc.driverStatusTxt,
                            style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.white),
                          ),
                          Icon(
                            Icons.phone_android,
                            color: Colors.white,
                            size: 26,
                          )
                        ],
                      ),
                    ),
                  )),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          top: 700.0,
          right: 22.0,
          child: GestureDetector(
            onTap: () {
              osmController.currentLocation();
            },
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(22.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      blurRadius: 6.0,
                      spreadRadius: 0.5,
                      offset: Offset(
                        0.7,
                        0.7,
                      ),
                    )
                  ]),
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Icon(
                  Icons.location_on,
                  color: Colors.black,
                ),
                radius: 20.0,
              ),
            ),
          ),
        ),
        Positioned(
          top: 100.0,
          right: 22.0,
          child: GestureDetector(
            onTap: () async {
              //FirebaseAuth.instance.signOut();
              await osmController.enableTracking();
            },
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(22.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      blurRadius: 6.0,
                      spreadRadius: 0.5,
                      offset: Offset(
                        0.7,
                        0.7,
                      ),
                    )
                  ]),
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Icon(
                  Icons.track_changes,
                  color: Colors.black,
                ),
                radius: 20.0,
              ),
            ),
          ),
        ),
      ],
    );
  }

然后告诉我该怎么修

flutter

来源：https://stackoverflow.com/questions/75331319/how-to-create-a-truly-responsive-design-in-flutter-using-stack-and-positioned-wi

1条答案

按热度按时间

4c8rllxm1#

就像这样......相对于设备的高度和宽度。

double deviceHeight:MediaQuery.of(context).size.height;
double deviceWidth=MediaQuery.of(context).size.width;

double width=350;
double height=500;
void checkDevice(){
if(deviceWidth<600) return;
if(deviceWidth>600 && 
deviceWidth<1024){
//for tablet size
width=800;
height=800;
}else{
//for web pages size in desktop
 width=1500;
 height=1500;
}

}


@override
 Widget build(BuildContext context) {
super.build(context);
return SizedBox(width:deviceWidth,height:deviceHeight:child:Fittedbox(child: SizedBox(width:width,height:height,childStack(
  children: [
    Googlelutter(mapKey: _mapKey, osmController: osmController),
    Positioned(
      top: height*0.7,
      left: 0.0,
      right: 0.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: width*0.1),
            child: Consumer<AppData>(
              builder: (ctx, dsc, child) => (ElevatedButton(
                style: ElevatedButton.styleFrom(
                    shape: const RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(width*0.7))),
                    backgroundColor: dsc.driverStatusClr),
                // color: dsc.driverStatusClr,
                onPressed: () async {
                  if (isDriverAvailable != true) {
                    isDriverAvailable = true;
                    makeDriverOnlineNow();
                    getLocationLiveUpdates();

                    Provider.of<AppData>(context, listen: false)
                        .buttonOnline(Colors.green.shade300, "Online");

                    await UserSimplePrefences.setButtonStatus(false);

                    // });
                    displayToastMessage("You are Online now", context);
                  } else {
                    Provider.of<AppData>(context, listen: false)
                        .buttonOnline(Colors.black54, "Offline");
                    driverOffline();
                    IsolateNameServer.removePortNameMapping(_isolateName);
                    BackgroundLocator.unRegisterLocationUpdate();
                    displayToastMessage("You are Offline now", context);
                    isDriverAvailable = false;

                    await UserSimplePrefences.setButtonStatus(true);

                    onStop();
                  }
                },
                child: Padding(
                  padding: EdgeInsets.all(width*0.01),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        dsc.driverStatusTxt,
                        style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Icon(
                        Icons.phone_android,
                        color: Colors.white,
                        size: width*0.05,
                      )
                    ],
                  ),
                ),
              )),
            ),
          ),
        ],
      ),
    ),
    Positioned(
      top: height*0.7,
      right: width*0.2,
      child: GestureDetector(
        onTap: () {
          osmController.currentLocation();
        },
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: width*0.07,BorderRadius.circular(width*0.05),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  blurRadius:width*0.005,
                  spreadRadius: width*0.007,
                  offset: Offset(
                    width*0.007,
                    width*0.007,
                  ),
                )
              ]),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: Icon(
              Icons.location_on,
              color: Colors.black,
            ),
            radius: width*0.07,
          ),
        ),
      ),
    ),
    Positioned(
      top: height*0.07,
      right: width*0.07,
      child: GestureDetector(
        onTap: () async {
          //FirebaseAuth.instance.signOut();
          await osmController.enableTracking();
        },
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(width*0.07),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  blurRadius: width*0.007,
                  spreadRadius: width*0.005,
                  offset: Offset(
                    width*0.005,
                    width*0.005,
                  ),
                )
              ]),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: Icon(
              Icons.track_changes,
              color: Colors.black,
            ),
            radius: width*0.01,
          ),
        ),
      ),
    ),
  ],))),
);

}

赞(0）回复(0）举报 2023-02-05

我来回答

如何使用堆栈和定位小部件在Flutter中创建真正响应式设计

1条答案

相关问题

热门标签

最新问答