Harsh Rajpara
Harsh Rajpara

Reputation: 79

How to container move around the small container in fluttter

i have one blue container when double tap on this red container open. and the red container position is fix it is not change when blue container move that time if red container and blue container border same than not move to more this direction than another direction to move in flutter.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double blueContainerX = 50;
  double blueContainerY = 50;
  bool showRedContainer = false;
  double redContainerX = 50;
  double redContainerY = 50;
  double blueContainerWidth = 200;
  double blueContainerHeight = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Demo'),
      ),
      body: Center(
        child: Stack(
          children: [
            // Red Container (Fixed or Positioned based on showRedContainer)
            if (showRedContainer)
              Positioned(
                left: redContainerX,
                top: redContainerY,
                child: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.red,
                      width: 2.0, // Border width
                    ),
                  ),
                ),
              ),
            // Blue Container (Draggable)
            Positioned(
              left: blueContainerX,
              top: blueContainerY,
              child: GestureDetector(
                onDoubleTap: () {
                  setState(() {
                    if (!showRedContainer) {
                      // Set red container's position only when it's double-tapped
                      showRedContainer = true;
                      redContainerX = blueContainerX;
                      redContainerY = blueContainerY;
                    }
                  });
                },
                onPanUpdate: (details) {
                  setState(() {
                    // Update blue container position
                    blueContainerX += details.delta.dx;
                    blueContainerY += details.delta.dy;

                    // Limit blue container movement within screen bounds
                    blueContainerX = blueContainerX.clamp(0.0, MediaQuery.of(context).size.width - blueContainerWidth);
                    blueContainerY = blueContainerY.clamp(0.0, MediaQuery.of(context).size.height - blueContainerHeight);



                    // Stop blue container movement when red container borders align
                    if ((blueContainerX + blueContainerWidth == redContainerX + 50 && details.delta.dx > 0) ||
                        (blueContainerY + blueContainerHeight == redContainerY + 50 && details.delta.dy > 0)) {
                      blueContainerX = blueContainerX;
                      blueContainerY = blueContainerY;
                    }
                  });
                },
                child: Container(
                  width: blueContainerWidth,
                  height: blueContainerHeight,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.blue,
                      width: 2.0, // Border width
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

i have one blue container when double tap on this red container open. and the red container position is fix it is not change when blue container move that time if red container and blue container border same than not move to more this direction than another direction to move in flutter.

enter image description here enter image description here

i have one blue container when double tap on this red container open. and the red container position is fix it is not change when blue container move that time if red container and blue container border same than not move to more this direction than another direction to move in flutter.

Upvotes: 0

Views: 41

Answers (0)

Related Questions