Skip to content

Add a new parameter to SizeTransition to control the cross axis size factor #134654

Closed

Description

@ValentinVignal

Is there an existing issue for this?

Use case

I have this snippet:

Code sample

You can also checkout https://github.com/ValentinVignal/flutter_app_stable/tree/flutter/size-transition-height-factor

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ColoredBox(
          color: Theme.of(context).colorScheme.secondaryContainer,
          child: AnimatedSwitcher(
            duration: const Duration(milliseconds: 300),
            transitionBuilder: (child, animation) {
              return SizeTransition(
                sizeFactor: animation,
                axis: Axis.vertical,
                child: child,
              );
            },
            child: _visible
                ? ColoredBox(
                    color: Theme.of(context).colorScheme.primaryContainer,
                    child: const SizedBox(
                      height: 200,
                      width: 200,
                      child: Center(
                        child: Text('Hello World'),
                      ),
                    ),
                  )
                : const SizedBox(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}
Video
Screen.Recording.2023-09-13.at.10.02.09.PM.mov

In the video the animation is vertical. The other axis (horizontal) is stretched and uses the entire available space.
I would like my primaryContainer to be centered and only use the width of its child (200 px).
I want the secondaryContainer to shrink and be the same size as the primaryContainer (and therefore hidden).

Proposal

Add a new parameter to SizeTransition (ex: crossAxisSizeFactor)

const SizeTransition({
super.key,
this.axis = Axis.vertical,
required Animation<double> sizeFactor,
this.axisAlignment = 0.0,
this.child,
}) : super(listenable: sizeFactor);

  class SizeTransition extends AnimatedWidget {
    const SizeTransition({
      // ...
+     this.crossAxisSizeFactor,
    }) : super(listenable: sizeFactor);
    // ... 
+   final double? crossAxisSizeFactor;
  }

and pass it to the cross axis of the Align widget:

return ClipRect(
child: Align(
alignment: alignment,
heightFactor: axis == Axis.vertical ? math.max(sizeFactor.value, 0.0) : null,
widthFactor: axis == Axis.horizontal ? math.max(sizeFactor.value, 0.0) : null,
child: child,
),
);

      return ClipRect(
        child: Align(
          alignment: alignment,
-         heightFactor: axis == Axis.vertical ? math.max(sizeFactor.value, 0.0) : null,
+         heightFactor: axis == Axis.vertical ? math.max(sizeFactor.value, 0.0) : crossAxisSizeFactor,
-         widthFactor: axis == Axis.horizontal ? math.max(sizeFactor.value, 0.0) : null,
+         widthFactor: axis == Axis.horizontal ? math.max(sizeFactor.value, 0.0) : crossAxisSizeFactor,
          child: child,
        ),
      );

In my code sample, I would use

crossAxisSizeFactor : 1,

And this gives me the output:

Video
Screen.Recording.2023-09-13.at.10.16.50.PM.mov

Activity

  1. added
    in triagePresently being triaged by the triage team
    c: new featureNothing broken; request for a new capability
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: proposalA detailed proposal for a change to Flutter
    and removed
    in triagePresently being triaged by the triage team
    on Sep 14, 2023
  2. added
    P3Issues that are less important to the Flutter project
    on Sep 19, 2023
  3. github-actions commented on Oct 25, 2023

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  4. locked as resolved and limited conversation to collaborators on Oct 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: animationAnimation APIsc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions