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:
