benjamin-kraatz / material_segmented_control Goto Github PK

hi, thanks for great control. any chance you could add a property that allowed us to have all of the options in the segmented control un-selected ?

Hi,

i found some errors in console with null_safety 3.0.0, but it seems everything works ??

../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/material_segmented_control-3.0.0-nullsafety.1/lib/material_segmented_control.dart:166:40: Warning: Operand of null-aware operation '??' has type 'Color' which excludes null.
 - 'Color' is from 'dart:ui'.
    final Color selectedColor = widget.selectedColor ?? Colors.blue;
../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/material_segmented_control-3.0.0-nullsafety.1/lib/material_segmented_control.dart:171:42: Warning: Operand of null-aware operation '??' has type 'Color' which excludes null.

 - 'Color' is from 'dart:ui'.
    final Color unselectedColor = widget.unselectedColor ?? Colors.white;
                                         ^

best regards
Harald

I think there are many basic settings that are missing or doesn't work as expected :

1. Can't remove horizontal margin (vertical margin is zero)
   • When used inside a stretched Column or a fixed-width SizedBox
2. Can't set the height (even with a SizedBox) :
   • When bigger it just centers itselft
   • When smaller it overflows
3. Can't remove/set the vertical content padding (horizontal one is zero)
4. If child is a Text, by default it applies the selected/unselected colors well, but it doens't work anymore when we set a custom style to the Text widget.
   • As an example, it work as expected with the TabBar component using the TabBarTheme.labelStyle

Thank you for your work, it is very usefull to me :)

Hi there,
I think it would be nice having a enabled/disable feature built-in to the library :)

Thanks!

The idea of making a Material segmented control is great !
But I've tried your plugin v1.2, and it's not the behaviour I expect from a segmented control.

Apple says :

segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.

Here they are not mutually exclusive...
Is it the expected behaviour ?

I got the bellow error when try to run your example:

Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Xcode build done. 10.4s
flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building DefaultTextStyle(debugLabel: (englishLike body1
flutter: 2014).merge(blackCupertino body1), inherit: false, color: Color(0xdd000000), family: .SF UI Text,
flutter: size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping
flutter: at box width, overflow: clip):
flutter: 'package:material_segmented_control/material_segmented_control.dart': Failed assertion: line 470 pos
flutter: 16: 'textDirection != null': is not true.
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter: https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: The relevant error-causing widget was:
flutter: Material
�[38;5;248mflutter:�[39;49m
flutter:
flutter: When the exception was thrown, this was the stack:
�[38;5;248mflutter: #2 new _RenderSegmentedControl�[39;49m
�[38;5;248mflutter: #3 _SegmentedControlRenderWidget.createRenderObject�[39;49m
�[38;5;244mflutter: #4 RenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #5 MultiChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #6 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #7 Element.updateChild�[39;49m
�[38;5;244mflutter: #8 SingleChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #9 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #10 Element.updateChild�[39;49m
�[38;5;244mflutter: #11 SingleChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #12 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #13 Element.updateChild�[39;49m
�[38;5;244mflutter: #14 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #15 Element.rebuild�[39;49m
�[38;5;244mflutter: #16 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #17 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #18 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #19 Element.updateChild�[39;49m
�[38;5;244mflutter: #20 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #21 Element.rebuild�[39;49m
�[38;5;244mflutter: #22 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #23 StatefulElement._firstBuild�[39;49m
�[38;5;244mflutter: #24 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #25 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #26 Element.updateChild�[39;49m
�[38;5;244mflutter: #27 SingleChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #28 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #29 Element.updateChild�[39;49m
�[38;5;244mflutter: #30 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #31 Element.rebuild�[39;49m
�[38;5;244mflutter: #32 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #33 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #34 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #35 Element.updateChild�[39;49m
�[38;5;244mflutter: #36 SingleChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #37 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #38 Element.updateChild�[39;49m
�[38;5;244mflutter: #39 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #40 Element.rebuild�[39;49m
�[38;5;244mflutter: #41 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #42 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #43 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #44 Element.updateChild�[39;49m
�[38;5;244mflutter: #45 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #46 Element.rebuild�[39;49m
�[38;5;244mflutter: #47 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #48 StatefulElement._firstBuild�[39;49m
�[38;5;244mflutter: #49 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #50 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #51 Element.updateChild�[39;49m
�[38;5;244mflutter: #52 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #53 Element.rebuild�[39;49m
�[38;5;244mflutter: #54 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #55 StatefulElement._firstBuild�[39;49m
�[38;5;244mflutter: #56 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #57 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #58 Element.updateChild�[39;49m
�[38;5;244mflutter: #59 SingleChildRenderObjectElement.mount�[39;49m
�[38;5;244mflutter: #60 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #61 Element.updateChild�[39;49m
�[38;5;244mflutter: #62 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #63 Element.rebuild�[39;49m
�[38;5;244mflutter: #64 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #65 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #66 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #67 Element.updateChild�[39;49m
�[38;5;244mflutter: #68 ComponentElement.performRebuild�[39;49m
�[38;5;244mflutter: #69 Element.rebuild�[39;49m
�[38;5;244mflutter: #70 ComponentElement._firstBuild�[39;49m
�[38;5;244mflutter: #71 StatefulElement._firstBuild�[39;49m
�[38;5;244mflutter: #72 ComponentElement.mount�[39;49m
�[38;5;244mflutter: #73 Element.inflateWidget�[39;49m
�[38;5;244mflutter: #74 Element.updateChild�[39;49m
�[38;5;244mflutter: #75 RenderObjectToWidgetElement._rebuild�[39;49m
�[38;5;244mflutter: #76 RenderObjectToWidgetElement.mount�[39;49m
�[38;5;244mflutter: #77 RenderObjectToWidgetAdapter.attachToRenderTree.�[39;49m
�[38;5;244mflutter: #78 BuildOwner.buildScope�[39;49m
�[38;5;244mflutter: #79 RenderObjectToWidgetAdapter.attachToRenderTree�[39;49m
�[38;5;244mflutter: #80 WidgetsBinding.attachRootWidget�[39;49m
�[38;5;244mflutter: #81 WidgetsBinding.scheduleAttachRootWidget.�[39;49m
�[38;5;244mflutter: #90 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:384:19)�[39;49m
�[38;5;244mflutter: #91 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:418:5)�[39;49m
�[38;5;244mflutter: #92 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12)�[39;49m
flutter: (elided 10 frames from class _AssertionError, package dart:async, and package dart:async-patch)
flutter:
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Test files:
main.dart:
import 'package:flutter/material.dart';
import 'package:material_segmented_control/material_segmented_control.dart';

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

class MyApp extends StatefulWidget {
@OverRide
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
int _currentSelection = 0;

@OverRide
Widget build(BuildContext context) {
return Container(
child: Center(
child: MaterialSegmentedControl(
children: _children,
selectionIndex: _currentSelection,
borderColor: Colors.grey,
selectedColor: Colors.redAccent,
unselectedColor: Colors.white,
borderRadius: 24.0,
disabledChildren: [
3,
],
onSegmentChosen: (index) {
setState(() {
_currentSelection = index;
});
},
),
),
);
}

Map<int, Widget> _children = {
0: Text('Hummingbird'),
1: Text('Kiwi'),
2: Text('Rio'),
3: Text('Telluraves')
};
}

Calling setState inside the child's selection listener enables selection of multiple items.

Currently, the is no workaround for this. It will be fixed soon. Tell me if you can reproduce it.

I tried to use this plugin. Had it on the pubspec.yaml v 2.0.9. But could not use the Widget. The import package:material_segmented_control/material_segmented_control.dart could not be resolved

Hi there,

The widget works great but I have a minor offset of the border every time I use it. Any idea why this might happen?

Best Regards

It will be interesting if the parent widget of the component to be the Material widget, so it can work with Cupertino based apps.

....... code
 return Material(
      child: InkWell(  
           splashColor: Colors.red,
           highlightColor: Colors.greenAccent,
           child: Padding(
           padding: widget.horizontalPadding.resolve(Directionality.of(context)),
           child: UnconstrainedBox(
             constrainedAxis: Axis.horizontal,
             child: box,
            ),
          ),
        ),
      );
    }
}

I tried hard to put some shadow (or the elevation at 6 like FABs) to the MaterialSegmentedControl() but I always end up with a too big and/or wrong shape container (not essentially using the Container() hey...) I tried Material() Container with decoration and more other things...

i found that in code. if i unset selected color or unsetSelected color. Library will be crashed. (function _updateColors() in material_segmented_control.dart:153)
The following code cause that error:
final Color pressedColor = widget.selectedColor.withOpacity(0.2);

this line of code should be selectedColor.withOpacity(0.2); or mark selectedColor as required in constructor

Most of the things in this issue were fixed, but we are still unable to customize the text color when we have a custom style.

Map<int, Widget> options = {
    0: Text(
      'Today',
      style: muliRegular(
        color: ThemeColor.primaryDarkGrey,
        fontSize: 12.0,
      ),
    ),
    1: Text(
      'Week',
      style: muliRegular(
        color: ThemeColor.primaryDarkGrey,
        fontSize: 12.0,
      ),
    ),
    2: Text(
      'Month',
      style: muliRegular(
        color: ThemeColor.primaryDarkGrey,
        fontSize: 12.0,
      ),
    ),
  };

Expected

What we really get

When I saw this component I was pleased but then saw that it only supported two children. To implement the Material Toggle Button it clearly needs to support a children array rather than just a left and right child.