Make the border visible and invisible when you press the button in Flutter

Question

I'm trying to make the border of my container visible when I click on it and invisible when it's inactive. I suspect that this can be done with setState, but I don't quite understand how this can be done. Or with if ... else read the click on the container and make the border visible or invisible.

Widget _introWidgets(double offset) {
    Widget buildCircleWidget(
      IconData iconData,
      LinearGradient iconGradient,
      Color firstBorderGradientColor,
      Color secondBorderGradientColor,
    ) =>
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            gradient: LinearGradient(
              colors: [firstBorderGradientColor, secondBorderGradientColor],
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(40),
              ),
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.white,
                child: GradientWidget(
                  gradient: iconGradient,
                  child: AnimatedContainer(
                    duration: Duration(milliseconds: 100),
                    child: SizedBox(
                      height: 40,
                      width: 80,
                      child: Icon(
                        iconData,
                        size: 36,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );

Next, I stuffed everything in Row and set the parameters for each circle. And I want to click on each of the circles with 'GestureDetectr' to read the click and change the visibility of the border

return Row(
      children: <Widget>[
        SizedBox(width: 20),
        GestureDetector(
          onTap: () {
            _moveToPage(0);
          },
          child: buildCircleWidget(
              NewAppIcons.battle,
              LinearGradient(
                colors: [Color(0xFF6094EA), Color(0xFFF030C1)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              Color(0xFF6094EA),
              Color(0xFFF030C1)),
        ),
        SizedBox(width: 43),
        GestureDetector(
          onTap: () {
            _moveToPage(1);
          },
          child: buildCircleWidget(
            Icons.bolt,
            LinearGradient(
              colors: [Color(0xFFF9D423), Color(0xFFFF4E50)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            Color(0xFFF9D423),
            Color(0xFFFF4E50),
          ),
        ),
      ],
    );

Answer 1

Please refer to below example

This is the simple example on how to hide border of container using ValueListenableBuilder instead of using setstate or any state management techniques.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final ValueNotifier<bool> updateBorder = ValueNotifier<bool>(false);
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<bool>(
      valueListenable: updateBorder,
      builder: (BuildContext context, bool value, Widget? child) {
        return Container(
          padding: const EdgeInsets.all(3.0),
          margin: const EdgeInsets.all(15.0),
          decoration: BoxDecoration(
            border: (value == true)
                ? Border.all(
                    style: BorderStyle.none, //BorderSide
                    color: Colors.red,
                  )
                : Border.all(
                    width: 2.0,
                    color: Colors.blueAccent,
                  ),
          ),
          child: Center(
            child: InkWell(
              onTap: () {
                updateBorder.value = !updateBorder.value;
              },
              child: Text(
                'Hello, World!',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ),
        );
      },
    );
  }
}

Answer 2

Here is the dummy example of hiding the border on click the container.

bool isClicked = false;

InkWell(
          onTap: () {
            setState(() {
              isClicked = !isClicked;
            });
          },
          child: Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                  border: Border.all(
                style: !isClicked ? BorderStyle.solid : BorderStyle.none,
              )),
              child: Text("Click me")),
        ),