2 Ways 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.

• Clickable Text In Flutter

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?

GestureDetector 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.

• 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?



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



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.

• Install Flutter In Android Studio and Create Project
• Create Flutter Project Using Commandline



• 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

clickable_container

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

• Flutter GestureDetector Docs
• Flutter InkWell Docs
Pin
Share
Tweet
0 Shares