flutter Move onTap funtion to separated file

Question

I'm new in Dart/Flutter

I have a page containing a lisTile Item as the following

class PermissionScreen extends StatelessWidget {
  const PermissionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(appBarTitle: 'Permissions'),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ListTile(
              leading: const CircleAvatar(
                child: Icon(Icons.mic),
              ),
              onTap: () async {
                PermissionStatus microphoneStatus =
                    await Permission.microphone.request();
                if (microphoneStatus == PermissionStatus.granted) {
                  if (context.mounted) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('Permission is OK')));
                  }
                }
                if (microphoneStatus == PermissionStatus.denied) {
                  if (context.mounted) {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                        content: Text('This Permission is Recommended')));
                  }
                }
                if (microphoneStatus == PermissionStatus.permanentlyDenied) {
                  openAppSettings();
                }
              },
              title: const Text('Mic Permission'),
            )
          ],
        ),
      ),
    );
  }
}

Now I want to move onTap Function to another file

      async {
        PermissionStatus microphoneStatus =
            await Permission.microphone.request();
        if (microphoneStatus == PermissionStatus.granted) {
          if (context.mounted) {
            ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Permission is OK')));
          }
        }
        if (microphoneStatus == PermissionStatus.denied) {
          if (context.mounted) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                content: Text('This Permission is Recommended')));
          }
        }
        if (microphoneStatus == PermissionStatus.permanentlyDenied) {
          openAppSettings();
        }
      },

I tried the following but I couldn't call it in onTap

class MicrophonePermission extends StatefulWidget {
  const MicrophonePermission({super.key});

  @override
  State<MicrophonePermission> createState() => _MicrophonePermissionState();
}

class _MicrophonePermissionState extends State<MicrophonePermission> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }

  @override
  void initState() {
    super.initState();
    _getMicrophonePermission();
  }

Future <PermissionStatus?> _getMicrophonePermission() async {
    final PermissionStatus microphoneStatus =
        await Permission.microphone.request();
    try {
      if (microphoneStatus == PermissionStatus.granted) {
        if (context.mounted) {
          ScaffoldMessenger.of(context)
              .showSnackBar(const SnackBar(content: Text('Permission is OK')));
        }
      }
      if (microphoneStatus == PermissionStatus.denied) {
        if (context.mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('This Permission is Recommended')));
        }
      }
      if (microphoneStatus == PermissionStatus.permanentlyDenied) {
        openAppSettings();
      }
    } catch (e) {
      // ignore_for_file: avoid_print
      print('Something Went wrong');
    }
    return null;
  }
}

I Used onTap:_getMicrophonePermission(); but it is not defined

I Used onTap:_getMicrophonePermission; but it is not defined

I Don't Know how to call it in onTap

Can any body help please

sorry for my bad English

thanks in-advance

score 2 · Accepted Answer · answered Aug 18 '23 at 19:54

You don't have to create a new class just for a method. You can create the method in the file and call it by its name. Let's say this is the method :

Future <PermissionStatus?> getMicrophonePermission(BuildContext context) async {
    final PermissionStatus microphoneStatus =
        await Permission.microphone.request();
    try {
      if (microphoneStatus == PermissionStatus.granted) {
        if (context.mounted) {
          ScaffoldMessenger.of(context)
              .showSnackBar(const SnackBar(content: Text('Permission is OK')));
        }
      }
      if (microphoneStatus == PermissionStatus.denied) {
        if (context.mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('This Permission is Recommended')));
        }
      }
      if (microphoneStatus == PermissionStatus.permanentlyDenied) {
        openAppSettings();
      }
    } catch (e) {
      // ignore_for_file: avoid_print
      print('Something Went wrong');
    }
    return null;
  }
}

And then use it in your ListTile :

class PermissionScreen extends StatelessWidget {
  const PermissionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(appBarTitle: 'Permissions'),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ListTile(
              leading: const CircleAvatar(
                child: Icon(Icons.mic),
              ),
              onTap: () async {
                await getMicrophonePermission(context);
              },
              title: const Text('Mic Permission'),
            )
          ],
        ),
      ),
    );
  }
}

flutter Move onTap funtion to separated file

1 Answers1