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

Flutter – how to fade | ellipsis | clip widgets when widget overflow?

I’m trying to create a row container with no width limit, and when its child elements overflow and need to wrap, fade the overflowing child elements.

enter image description here

My current solution is to use Rich.text, but it doesn’t feel like a good idea. It is for text. Do you have a better solution?

import 'package:flutter/material.dart';

class NoWrap extends StatelessWidget {
  const NoWrap({
    super.key,
    required this.children,
  });

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      overflow: TextOverflow.fade,
      softWrap: false,
      TextSpan(
        children: [for (final child in children) WidgetSpan(child: child)],
      ),
    );
  }
}

fade | ellipsis | clip overflowing child elements without using Rich.text

Tags:

2

Answers


  1. 0

    return OverflowBox(
    minWidth: 0,
    minHeight: 0,
    maxWidth: double.infinity,
    child: Row(
    children: [
    for (final child in children)
    Expanded(
    child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 4.0),
    child: child,
    ),
    ),
    ],
    ),
    Try this,

    Login or Signup to reply.
  2. 0

    You can achieve this by using 2 different widgets.

    1. OverflowBox widget.

    Here’s the code

    import 'package:flutter/material.dart';

class NoWrap extends StatelessWidget {
  const NoWrap({
    super.key,
    required this.children,
  });

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: children.map((child) => _fadeOnOverflow(child)).toList(),
    );
  }

  Widget _fadeOnOverflow(Widget child) {
    return Stack(
      children: [
        OverflowBox(
          maxWidth: double.infinity,
          child: child,
        ),
        Positioned(
          right: 0.0,
          child: Container(
            width: 15,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Colors.transparent, Colors.transparent, Colors.black.withOpacity(0.5)],
              ),
            ),
          ),
        ),
      ],
    );
  }
}
    1. ClipRect widget

    You can use this

    import 'package:flutter/material.dart';

class NoWrap extends StatelessWidget {
  const NoWrap({
    super.key,
    required this.children,
  });

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: children.map((child) => _fadeOnOverflow(child)).toList(),
    );
  }

  Widget _fadeOnOverflow(Widget child) {
    return ClipRect(
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [Colors.transparent, Colors.transparent, Colors.black.withOpacity(0.5)],
          ),
        ),
        child: child,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search