Home > Mobile >  Flutter: How do I add a floatingactionbutton inside a container
Flutter: How do I add a floatingactionbutton inside a container

Time:01-24

I have the below code and I would like to add a floatingactionbutton to turn on and off the camera flash. I tried different ways but was not able to do it. Any suggestions would help. I tired different packages like torch, torch-light etc and it didn't work I think is because I have already called the camera package

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class CameraScreen extends StatefulWidget {
CameraScreen({Key key, @required this.controller}) : super(key: key);
final CameraController controller;
@override
_CameraScreenState createState() => _CameraScreenState();
  }

class _CameraScreenState extends State<CameraScreen> {
@override
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size.width;

return Container(
  child: ShaderMask(
    shaderCallback: (rect) {
      return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.center,
              colors: [Colors.black, Colors.transparent])
          .createShader(Rect.fromLTRB(0, 0, rect.width, rect.height / 4));
    },
    blendMode: BlendMode.darken,
    child: Transform.scale(
      scale: 1.0,
      child: AspectRatio(
        aspectRatio: MediaQuery.of(context).size.aspectRatio,
        child: OverflowBox(
          alignment: Alignment.center,
          child: FittedBox(
            fit: BoxFit.fitHeight,
            child: Container(
              width: size,
              height: size / widget.controller.value.aspectRatio,
              child: Stack(
                children: <Widget>[
                  CameraPreview(widget.controller),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  )
);
 }

   @override
   void dispose() {
      super.dispose();
    }
    }

CodePudding user response:

You can wrap your widget with scaffold and can add float button inside the scaffold like below :

 @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size.width;
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: (){},),
      body: ShaderMask(
        shaderCallback: (rect) {
      return const LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.center,
              colors: [Colors.black, Colors.transparent])
          .createShader(Rect.fr

    ///// your code ///////
  • Related