Home > Software engineering >  Reusable Custom Widget with onTap using Flutter?
Reusable Custom Widget with onTap using Flutter?

Time:11-23

I am doing now a flutter project and it was first time working on a flutter.

I have a reusable custom widget named "card_city.dart" and using it to other widget named "city.dart" using this code:

CardCity('Manila', 'assets/images/manila.jpg', Get.to(() => const Manila());)

Anyway, I am using GetX Page Route code: Get.to(() => const Manila());

and I am getting this error:

  1. Arguments of a constant creation must be constant expressions. Try making the argument a valid constant, or use 'new' to call the constructor.
  2. A value of type 'Null' can't be assigned to a parameter of type 'void Function()' in a const constructor. Try using a subtype, or removing the keyword 'const'.
  3. Expected to find ')'.

card_city.dart:

import 'package:flutter/material.dart';
import 'package:sample/component/colors.dart';
import 'package:sample/component/styles.dart';

class CardCity extends StatelessWidget {
  final String _cityTitle;
  final String _cityAssetImage;
  final VoidCallback _onTap;

  const CardCity(this._cityTitle, this._cityAssetImage, this._onTap, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 150.0,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(_cityAssetImage),
            fit: BoxFit.cover,
            colorFilter:
                const ColorFilter.mode(Color(0x400B7A77), BlendMode.srcOver),
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            _onTap;
          },
          borderRadius: BorderRadius.circular(15.0),
          splashColor: BrandColor.color.transNeon,
          child: Center(
            child: Text(
              _cityTitle.toUpperCase(),
              style: mainTitleBarabaraWhite,
            ),
          ),
        ),
      ),
    );
  }
}

Fixed:

card_city.dart:

import 'package:flutter/material.dart';
import 'package:sample/component/colors.dart';
import 'package:sample/component/styles.dart';

class CardCity extends StatelessWidget {
  final String _cityTitle;
  final String _cityAssetImage;
  final VoidCallback _onTap;

  const CardCity(this._cityTitle, this._cityAssetImage, this._onTap, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 150.0,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(_cityAssetImage),
            fit: BoxFit.cover,
            colorFilter:
                const ColorFilter.mode(Color(0x400B7A77), BlendMode.srcOver),
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: _onTap;,
          borderRadius: BorderRadius.circular(15.0),
          splashColor: BrandColor.color.transNeon,
          child: Center(
            child: Text(
              _cityTitle.toUpperCase(),
              style: mainTitleBarabaraWhite,
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

Try this way

CardCity(
     'Manila', 
      'assets/images/manila.jpg',
     (){ 
        Get.to(() => const Manila());
      })

And on CardCity change InkWell tap like

child: InkWell(
          onTap: () {
            _onTap();
          },

or

child: InkWell(onTap: _onTap,..

Also, I would prefer named constructor in this case.

  • Related