首页 > 解决方案 > Orientation Builder- Flutter how to add different body within one code base

问题描述

I have different bodies for the image that I want to show,

I want to use Orientation builder for one of the codes to show portrait and the other to show landscape, how can I do this?

child: OrientationBuilder(
  builder: (BuildContext context, Orientation orientation) {
    return Orientation.landscape
           body: Center(
          child: InteractiveViewer(
              maxScale: styling.interactiveviewermaxscale,
              minScale: styling.interactiveviewerminscale,
              child: Container(
                  constraints: BoxConstraints.expand(),
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage(quranImagepg), fit: BoxFit.fill)),
    else 
return : Portrait: 
      body: SingleChildScrollView(
        child: AspectRatio(
          // width / height
          aspectRatio: 0.7,
          // child: Container(
          // width: styling.singlechildScrollviewWidthsidetoside,
          // height: styling.singlechildScrollviewHeightsidetoside,
          // width: width,
          // height: height * 5,

          // width: 1500,
          // height: 1200,

          child: InteractiveViewer(
            maxScale: styling.interactiveviewermaxscale,
            minScale: styling.interactiveviewerminscale,
            child: Stack(
              // crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisAlignment: MainAxisAlignment.start,
              // mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Container(
                  child: new Image.asset(quranImagepg,
                      // fit: BoxFit.fitWidth,
                      fit: BoxFit.cover
                      // color: Colors.purpleAccent,
                      // colorBlendMode: BlendMode.,
                      ),
                ),

标签: iosflutterflutter-layoutorientationscreen-orientation

解决方案


...
child:OrientationBuilder(
    builder: (context, orientation) {
       if (orientation == Orientation.landscape){
        return Center(... //rest of your landscape code)
       }else{
        return SingleChildScrollView( ... //rest of you portrait code)
       }
    },
);

推荐阅读