Text widget shows text with strange styles (Flutter)

Question

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

Answer 1

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.

Answer 2

i have tried to run your code, and it seems to work fine without any padding to the text widgets or height, heres's a screenshot:

i believe what you can do is to check through you NavBarTop widget, to see if there could be any property affecting this.