Category

Flutter-Beginner

Category

How To Make Clickable Container in Flutter: 3 Examples

Do you want to make a clickable container in Flutter?

Then this post is definitely for you.

By default, Container doesn’t have any onPress or onTap property. So we need to use any of the widgets given below.

  1. GestureDetector.
  2. InkWell – it has ripple effect.

Let’s start with GestureDetector.

1. How To Make A Clickable Container Using GestureDetector?

clickable container using gesturedetector in flutterGestureDetector widgets used to detect gestures, so it provides number of sensing properties. But here we will use the onTap property.

Using GestureDetector, you don’t need to code a lot. Just wrap your container with GestureDetector.
gesturedetector container

  • If you are using Visual Studio, Click on the Container widget and click on the yellow bulb icon or use Ctrl + Dot key (keyboard shortcut – Windows). Then it displays the context menu.
  • Select wrap with widget and change widget to GestureDetector.
  • Provide onTap property and anonymous function as it’s value.
  • You can also give function name, I just mention anonymous function for this example.
  • That’s all.
    • When container tapped, onTap calls and prints the content.
    GestureDetector(
              onTap: () {
                print('GestureDetector onTap Called');
              },
              child: Container(
                child: Center(
                  child: Text(
                    'Clickable Container Using GestureDetector',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
    

    2. How To Make Clickable Container Using InkWell?

    clickable container using inkwell

    Like GestureDetector, You can use InkWell widget to make Container clickable and it also provides ripple effect.

    • Wrap the container with Inkwell and create onTap property.

    that’s it. everything done.

    InkWell(
              onTap: () {
                print('InkWell onTap Called');
              },
              child: Container(
                child: Center(
                  child: Text(
                    'Clickable Container Using InkWell',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
    

    3. Create a Clickable AnimatedContainer

    clickable animated container

    In this example, we will use AnimatedContainer – Animated version of Container. Let’s animate container height when a tap occurs.

    • if _initialValue is true, then AnimatedContainer width and height set to 200.
    • When _initialValue becomes false, height and width becomes 300.
    • When the user taps, setState() rebuilds the UI with _initialValue.
      bool _initialValue = true;
    ....
    ..
    .
    GestureDetector(
                onTap: () {
                  setState(() {
                    _initialValue = !_initialValue;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(seconds: 2),
                  color: Colors.amber,
                  height: _initialValue ? 200 : 300,
                  width: _initialValue ? 200 : 300,
                  child: Center(
                    child: const Text(
                      'Clickable AnimatedContainer Using GestureDetector',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
    
    

    Create a project with all the above examples.

    clickable container flutter

    • In this example, Column widget used to align each widgets vertically.
    • SizedBox used to give empty space between the widgets. You can also use Padding widget.
    • MainAxisAlignment.center makes the elements move to center.
    • Remove Debug Banner In Flutter
    
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> 
    {
    
      bool _initialValue = true;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Clickable Container In Flutter',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Clickable Container In Flutter'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  height: 20,
                ),
                GestureDetector(
                  onTap: () {
                    print('GestureDetector onTap Called');
                  },
                  child: Container(
                    child: Center(
                      child: Text(
                        'Clickable Container Using GestureDetector',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                InkWell(
                  onTap: () {
                    print('InkWell onTap Called');
                  },
                  child: Container(
                    child: Center(
                      child: Text(
                        'Clickable Container Using InkWell',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                InkWell(
                  onTap: () {
                    setState(() {
                      _initialValue = !_initialValue;
                    });
                  },
                  child: AnimatedContainer(
                    duration: const Duration(seconds: 2),
                    color: Colors.amber,
                    height: _initialValue ? 200 : 300,
                    width: _initialValue ? 200 : 300,
                    child: Center(
                      child: Text(
                        'Clickable AnimatedContainer Using GestureDetector',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    

    Run the application.

    Download Source Code

    If you like this post, please share it with your family and friends.
    Thanks.

Please disable your adblocker or whitelist this site!