Home > Blockchain >  Material Segmented Control without selected by default in Flutter
Material Segmented Control without selected by default in Flutter

Time:11-19

I am using Material Segmented Control https://pub.dev/packages/material_segmented_control

I can't get none of the buttons to be selected by default. I have tried

selectionIndex = null

or

selectionIndex = -1

but these two ways can not.

CodePudding user response:

I'm guessing that you declared the type of selectionIndex as int. Change the variable type to dynamic. I am attaching a change to the example of the package.

import 'dart:math';

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<MyApp> {
  dynamic _currentSelection = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MaterialSegmentedControl(
                children: _children,
                selectionIndex: _currentSelection,
                borderColor: Colors.grey,
                selectedColor: Colors.redAccent,
                unselectedColor: Colors.white,
                borderRadius: 6.0,
                disabledChildren: _disabledIndices,
                verticalOffset: 8.0,
                onSegmentChosen: (index) {
                  setState(() {
                    _currentSelection = index;
                  });
                },
              ),
              SizedBox(
                height: 8,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    child: Text('Toggle disabled'),
                    onPressed: () {
                      // This is just an example on how disabled children work.
                      // A disabled index is determined randomly.
                      setState(() {
                        _disabledIndices.clear();
                        _disabledIndices.add(_randomInt());
                      });
                    },
                  ),
                  const SizedBox(width: 8),
                  ElevatedButton(
                    child: Text('Un-select all'),
                    onPressed: () => setState(() => _currentSelection = null),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Map<int, Widget> _children = {
    0: Text('Flutter'),
    1: Text('Dart'),
    2: Text('Desktop'),
    3: Text('Mobile'),
    4: Text('Web')
  };

  // Holds all indices of children to be disabled.
  // Set this list either null or empty to have no children disabled.
  List<int> _disabledIndices = [];

  int _randomInt() {
    return Random.secure().nextInt(_children.length);
  }
}
  • Related