cph-cachet / research.package

A Flutter package implementing support for surveys like ResearchStack and ResearchKit
MIT License
51 stars 44 forks source link

Material 3 Support #89

Open TC3000 opened 1 year ago

TC3000 commented 1 year ago

Hello.

Could we please have Material 3 support? If I use the useMaterial3 flag on ThemeData, visual elements such as buttons aren't rendered properly.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(
          useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
appliedrd commented 1 year ago

In partucular, the NEXT on the NEXT button , when enabled, cannt be seen

msazzuhair commented 11 months ago

I fixed the button problem when material 3 is enabled by wrapping the RPUITask widget with the Theme widget and overriding the elevated button foreground color:

Widget build(BuildContext context) {
  // Wrap the RPUITask widget with Theme widget
  return Theme(
    data: Theme.of(context).copyWith(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          foregroundColor: Theme.of(context).colorScheme.onPrimary, // Change the foreground color (text, etc) of the elevated button
        )
      )
    ),
    child: RPUITask(
      task: surveyTask,
      onSubmit: resultCallback,
      onCancel: (RPTaskResult? result) {
        if (result == null) {
          debugPrint("No result");
        } else {
          cancelCallBack(result);
        }
      },
    ),
  );
}

You might also need to override other styles such as OutlinedButton and Text themes on some components.

How to override a theme