Question 188369 in Flutter Question posted in
The official Flutter documentation can be found here.

How to extend an element between two boxes in Flutter without exceeding their size?

Do you have any idea how I can achieve in Flutter to expand an element between two boxes while holding the click?

I found these two links, Flutter draggable container: expand from top to bottom and https://flutterawesome.com/a-widget-that-allow-user-resize-the-widget-with-drag/, but they don’t correspond to my use case. Here, I would like the expandable area to stay within the boxes and not exceed the size of a box.

Drag box

Thank you for your help,

Quentin

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If found another solution,

    I use the GestureDetector like this :

    import 'package:flutter/material.dart';
import 'package:planning/models/appointment.dart';

class AppointmentWidget extends StatefulWidget {
  final Appointment appointment;
  final double cellWidth;

  const AppointmentWidget({Key? key, required this.appointment, required this.cellWidth}) : super(key: key);

  @override
  _AppointmentWidgetState createState() => _AppointmentWidgetState();
}

class _AppointmentWidgetState extends State<AppointmentWidget> {
  late double _width = 0.0;
  double _delta = 0.0;

  @override
  void initState() {
    super.initState();
    _width = calculateWidth();
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: (widget.appointment.startDay.weekday - 1) * widget.cellWidth,
      child: Row(
        children: [
          Container(
            width: _width,
            height: 50,
            color: widget.appointment.color,
          ),
          Align(
              alignment: Alignment.centerRight,
              child: GestureDetector(
                onHorizontalDragUpdate: (details) {
                  setState(() {
                    _width += details.delta.dx;
                    _delta = details.localPosition.dx;
                  });
                },
                onHorizontalDragEnd: (details) {
                  setState(() {
                    print(_delta);
                    print(widget.cellWidth / 2);
                    if(_delta > widget.cellWidth / 2) {
                        widget.appointment.endDay = widget.appointment.endDay.add(Duration(days: 1));
                    } else if (_delta < widget.cellWidth / 2) {
                        widget.appointment.endDay = widget.appointment.endDay.subtract(Duration(days: 1));
                    }
                    _width = calculateWidth();
                  });
                },
                child: Container(
                    height: 50,
                    width: 30,
                    color: Colors.green,
                    child: Icon(Icons.chevron_right, color: Colors.black)
                ),
              )
          )
        ],
      ),
    );
  }

  double calculateWidth() {
    print(widget.appointment.endDay.difference(widget.appointment.startDay).inDays);
    return ((widget.appointment.endDay.difference(widget.appointment.startDay).inDays + 1) * widget.cellWidth) - 30;
  }
}

  2. 0

    Just use a FractionallySizedBox widget:

    FractionallySizedBox(
  WidthFactor: 0.4, //modify this
  child: Row(...),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search