Lalit Rawat
Lalit Rawat

Reputation: 1292

how to show camera in half screen aspect ratio or const height not working

i want to display camera in half screen to capture the photo but i try to give height and aspect ratio but none of them is working here is code what i've tried. Camera is still opening in full screen I am using this camera lib

 Widget _camera() {
    return Container(
      height: MediaQuery.of(context).size.height / 2,   // This is the height not working 
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
         Container(
            child: AspectRatio(
              aspectRatio: 16 / 9,                      //this is also not working
              child: CameraPreview(_cameraController),
            ),
          ),
    // This is to draw a rectangle on a camera
          Container(
            margin: const EdgeInsets.only(top: 16),
            width: MediaQuery.of(context).size.width - 16,
            height: MediaQuery.of(context).size.height / 2.8,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: KpColors.whiteColor),
            ),
          ),
        ],
      ),
    );
  }

Upvotes: 0

Views: 814

Answers (1)

Jim
Jim

Reputation: 7601

you can change the ratio by using scale, this article:

Map<String, double> ratios = {
      '1:1': 1 / 1,
      '9:16': 9 / 16,
      '3:4': 3 / 4,
      '9:21': 9 / 21,
      'full': MediaQuery.of(context).size.aspectRatio,
    };

final size = MediaQuery.of(context).size;
         print('screen ratio: ${size.aspectRatio}, default: $_defaultRatio');

         return Transform.scale(
           scale: 1.0,
           child: AspectRatio(
             aspectRatio: _defaultRatio,
             child: OverflowBox(
               alignment: Alignment.center,
               child: FittedBox(
                 fit: size.aspectRatio >= _defaultRatio
                     ? BoxFit.fitHeight
                     : BoxFit.fitWidth,
                 child: Container(
                   width: size.aspectRatio >= _defaultRatio
                       ? size.height
                       : size.width,
                   height: size.aspectRatio >= _defaultRatio
                       ? size.height / controller.value.aspectRatio
                       : size.width / controller.value.aspectRatio,
                   child: Stack(
                     children: <Widget>[
                       CameraPreview(controller),
                     ],
                   ),
                 ),
               ),
             ),
           ),
         );

Upvotes: 1

Related Questions