flutterdartflutter-providerflutter-hooks

Text widget shows text with strange styles (Flutter)


I'm using Provider in Flutter for state management. And I want to display some text in my widget using this Provider. The test is shown but is looks very strange height or padding I don't know. So here is a code.

class JobDetailsScreen extends HookWidget {
  const JobDetailsScreen({required this.id, Key? key}) : super(key: key);

  final String id;

  @override
  Widget build(BuildContext context) {
    final job = Provider.of<JobsNotifier>(context).currentJob;
    var loading = Provider.of<JobsNotifier>(context).isLoadingCurrentJob;
    useEffect(() {
      if (job == null) {
        Future.microtask(() async {
          await Provider.of<JobsNotifier>(context, listen: false)
              .getCurrentJob(id);
        });
      }
      return () => {};
    }, [id]);
    return Scaffold(
      appBar: const NavBarTop(
        title: 'Job Details',
        innerAppBar: true,
      ),
      body: loading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : SingleChildScrollView(
              child: Container(
                padding: const EdgeInsets.all(15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(job.title,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 24)),
                    Text(job.company,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18)),
                    ElevatedButton(
                      onPressed: () async {
                        try {
                          await openUrl(job.applyUrl!);
                        } on String catch (e) {
                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            content: Text(
                              e,
                              style: const TextStyle(color: Colors.white),
                            ),
                            backgroundColor: Colors.red,
                          ));
                        }
                      },
                      style: ButtonStyle(
                          minimumSize: MaterialStateProperty.all(
                              const Size(double.infinity, 50))),
                      child: const Text('Apply'),
                    ),
                  ],
                ),
              ),
            ),
    );
  }
}

And I see this on my screen

Screen with wrong text behaviour

I'm expecting widget to show text the right way without any paading and some redundant height. It should be like this:

Right text behaviour screen


Solution

  • The response might contain newlines. Like maybe job.title equals "\nUI/UI Design Lead\n\n".

    Try use job.title.trim() so any leading and trailing whitespaces and newlines are removed.