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),
          ),
        ),
      ],
    );

CodePudding user response：

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")),
        ),

CodePudding user response：

Please refer to below example

ValueListenableBuilder widget. It is a best widget. It builds the widget every time the valueListenable value changes. Its values remain synced with there listeners i.e. whenever the values change the ValueListenable listen to it. It updates the UI without using setState() or any other state management technique.

For more info refer to this link description

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,
              ),
            ),
          ),
        );
      },
    );
  }
}