CODEWITHSUNDEEP
flutterdartflutter-layout
Bunthong K
Bunthong K

Reputation: 134

How to blur out un-selected items in flutter

I m trying to have a set of status for user to choose inside my flutter app. This is similar to what I want :

The Picture

But I have no idea how to do it. I tried using a Row() of Buttons() but whenever I select one button, the other one will still be a normal button.

Anyways, I want the selected button to stand out from the rest.

Any help would REALLY be appreciated!

Upvotes: 0

Views: 288

Answers (3)

Dani Eid
Dani Eid

Reputation: 104

you can use getX to control the state of each button, you can read more about it from the official documentation! you need to check how to use the controller or you can use Obx

Upvotes: 1

s_erfani
s_erfani

Reputation: 494

I don't think this is the best way but you can do something like this with setState:

import 'package:flutter/material.dart';

void main() async {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {
  @override
  State<TestApp> createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  bool button1Selected = true;
  bool button2Selected = false;
  bool button3Selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    button1Selected = true;
                    button2Selected = false;
                    button3Selected = false;
                  });
                },
                child: Text("away"),
                style: ElevatedButton.styleFrom(
                  primary: button1Selected ? Colors.red : Colors.grey,
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    button1Selected = false;
                    button2Selected = true;
                    button3Selected = false;
                  });
                },
                child: Text("At work"),
                style: ElevatedButton.styleFrom(
                  primary: button2Selected ? Colors.green : Colors.grey,
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    button1Selected = false;
                    button2Selected = false;
                    button3Selected = true;
                  });
                },
                child: Text("gaming"),
                style: ElevatedButton.styleFrom(
                  primary: button3Selected ? Colors.blue : Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Peter Koltai
Peter Koltai

Reputation: 9734

One approach is to keep track of last pressed button in a StatefulWidget and use an Opacity widget to wrap your buttons. Opacity will be calculated based on the last pressed button, which you can update with setState. Initially I assume you want to show all buttons without opacity, but you can adjust in the code below.

I use an index number for the buttons but there are other possibilities. Also for simplicity I use that same _onPressed with a parameter, but of course you can use different ones, only call the setState method from each accordingly.

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int? _selectedButtonIndex;

  @override
  Widget build(BuildContext context) {
    var buttons = [
      Opacity(
          opacity: _selectedButtonIndex == null
              ? 1
              : _selectedButtonIndex == 0
                  ? 1
                  : 0.3,
          child: ElevatedButton(
              onPressed: () => _onPressed(0), child: Text('Button1'))),
      Opacity(
          opacity: _selectedButtonIndex == null
              ? 1
              : _selectedButtonIndex == 1
                  ? 1
                  : 0.3,
          child: ElevatedButton(
              onPressed: () => _onPressed(1), child: Text('Button2'))),
      Opacity(
          opacity: _selectedButtonIndex == null
              ? 1
              : _selectedButtonIndex == 2
                  ? 1
                  : 0.3,
          child: ElevatedButton(
              onPressed: () => _onPressed(2), child: Text('Button3'))),
    ];

    return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: buttons);
  }

  void _onPressed(int buttonIndex) {
    setState(() {
      _selectedButtonIndex = buttonIndex;
    });
  }
}

Upvotes: 1

Related Questions