How to make widget out of a GestureDetector with a Container child?

I want to make a reusable button with a container in GestureDetector which will execute some function if I tap it and its color will become dark if I hold it. Any help, hint, tip would be very much appreciated.

I tried writing the GestureDetector in the custom widget file but it gives me errors.

When i try to extract widget on the GestureDetector it gives an Reference to an enclosing class method cannot be extracted error.

(the main page)

import 'package:flutter/material.dart';
import 'ReusableTwoLineList.dart';
import 'Text_Content.dart';

const mainTextColour = Color(0xFF212121);
const secondaryTextColour = Color(0xFF757575);
const inactiveBackgroundCardColor = Color(0xFFFFFFFF);
const activeBackgroundCardColor = Color(0xFFE5E5E5);

enum CardState {
  active,
  inactive,
}

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  CardState currentCardState = CardState.inactive;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: ListView(
        children: <Widget>[
          GestureDetector(
            onTapDown: (TapDownDetails details) {
              setState(() {
                currentCardState = CardState.active;
              });
            },
            onTapCancel: () {
              setState(() {
                currentCardState = CardState.inactive;
              });
            },
            onTap: () {
              setState(() {
                currentCardState = CardState.inactive;
                //some random function
              });
            },
            child: ReusableTwoLineList(
              mainTextColor: mainTextColour,
              secondaryTextColor: secondaryTextColour,
              backgroundCardColor: currentCardState == CardState.active
                  ? activeBackgroundCardColor
                  : inactiveBackgroundCardColor,
              cardChild: TextContent(
                mainLabel: 'First Day',
                secondaryLabel: 'This is the first day of the week',
              ),
            ),
          ),
          ReusableTwoLineList(
            mainTextColor: mainTextColour,
            secondaryTextColor: secondaryTextColour,
            cardChild: TextContent(
              mainLabel: '2nd day',
              secondaryLabel: 'This is the end day',
            ),
          ),
          ReusableTwoLineList(
            mainTextColor: mainTextColour,
            secondaryTextColor: secondaryTextColour,
          ),
        ],
      ),
    );
  }
}

ReusableTwoLineList.dart (the custom widget i am trying to make)

class ReusableTwoLineList extends StatelessWidget {
  ReusableTwoLineList({
    @required this.mainTextColor,
    @required this.secondaryTextColor,
    this.backgroundCardColor,
    this.cardChild,
    this.onPressed,
  });

  final Color mainTextColor, secondaryTextColor, backgroundCardColor;
  final Widget cardChild;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: backgroundCardColor,
      padding: EdgeInsets.symmetric(horizontal: 16),
      height: 72,
      width: double.infinity,
      child: cardChild,
    );
  }
}

This is what i want but in a custom widget so i can use it over and over. Normal-https://i.imgur.com/lVUkMFK.png On Pressed-https://i.imgur.com/szuD4ZN.png

You can use extract method instead of extract widget. Flutter will add everything as it is, and instead of a class you will get a reusable function.