flutter-form-builder-ecosystem / flutter-form-builder-ecosystem/flutter_form_builder

FormBuilderChoiceChip: large text for options not wrapping correctly.

Open
#1,276 0 comments 2 reactions 0 assignees View on GitHub
bug
Dominant language
Dart
Stars
1.6k
Forks
561
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Package/Plugin version

9.0.0

### Platforms

- [X] Android
- [ ] iOS
- [ ] Linux
- [ ] MacOS
- [X] Web
- [ ] Windows

### Flutter doctor

Flutter doctor

```bash
[✓] Flutter (Channel beta, 3.13.0-0.2.pre, on Ubuntu 22.04.2 LTS 5.19.0-50-generic, locale en_US.UTF-8)
• Flutter version 3.13.0-0.2.pre on channel beta at /home/lucas/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ac71592bc6 (10 days ago), 2023-07-18 14:53:57 -0600
• Engine revision e14db68a86
• Dart version 3.1.0 (build 3.1.0-262.2.beta)
• DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /home/lucas/Android/Sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /home/lucas/android-studio/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✗] Linux toolchain - develop for Linux desktop
✗ clang++ is required for Linux development.
It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from https://github.com/ninja-build/ninja/releases
• pkg-config version 0.29.2
✗ GTK 3.0 development libraries are required for Linux development.
They are likely available from your distribution (e.g.: apt install libgtk-3-dev)

[✓] Android Studio (version 2022.3)
• Android Studio at /home/lucas/android-studio
• Flutter plugin version 74.0.3
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Community Edition (version 2023.1)
• IntelliJ at /home/lucas/.local/share/JetBrains/Toolbox/apps/IDEA-C/ch-0/231.9011.34
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version unknown)
• VS Code at /snap/code/current
• Flutter extension version 3.68.0
✗ Unable to determine VS Code version.

[✓] VS Code (version 1.81.0-insider)
• VS Code at /usr/share/code-insiders
• Flutter extension version 3.69.20230703

[✓] Connected device (3 available)
• motorola edge 20 pro (mobile) • 0075738854 • android-arm64 • Android 13 (API 33)
• Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.2 LTS 5.19.0-50-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.133

[✓] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.
```

### Minimal code example

Code sample

```dart
FormBuilderChoiceChip(
visualDensity: VisualDensity.standard,
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
name: 'profileType',
runSpacing: 10,
decoration: const InputDecoration(
border: InputBorder.none,
),
validator: FormBuilderValidators.required(
errorText: 'Please select an option',
),
options: const [
FormBuilderChipOption(
value: 'attendee',
child: Text(
"I'm a regular person trying to find events to attend",
textAlign: TextAlign.center,
softWrap: true,
maxLines: 4,
),
),
FormBuilderChipOption(
value: 'artist',
child: Text(
"I'm an artist looking for events to perform at",
textAlign: TextAlign.center,
softWrap: true,
maxLines: 4,
),
),
FormBuilderChipOption(
value: 'organizer',
child: Text(
"I'm an event organizer or promoter",
textAlign: TextAlign.center,
softWrap: true,
maxLines: 4,
),
),
],
)
```

### Current Behavior

![image](https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/10624972/ff3e86d5-fcbf-4354-8ffc-c3ee0a819271)

The 'attend' is being cut. If I lower even more the width for this container, it will wrap, but depending on the container size it will not wrap correctly:

![image](https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/10624972/700e6192-3ec3-4bf0-adb8-194f7a802876)

In this example the first chip wrapped but the second don't.

### Expected Behavior

The chip button should wrap the text into a new line for large text and small containers and increase its height correctly when needed.

### Steps To Reproduce

Large text child for a `FormBuilderChipOption`.

### Aditional information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.