Getting floating action button error in the flutter app - flutter

Question

I am new to flutter and I am trying to make an app, but I got stuck in the initial phase only, and can't figure out what the problem is.
Below is my code:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: InputPage(),
),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Center(
child: Text('Body Text'),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
);
}
}
I am getting error on my floating action button.
Below is the error message:
Compiler message:
lib/main.dart:29:7: Error: No named parameter with the name 'floatingActionButton'.
floatingActionButton: FloatingActionButton(
^^^^^^^^^^^^^^^^^^^^
../../../desktop/flutter/flutter/packages/flutter/lib/src/widgets/basic.dart:1870:9: Context: Found this candidate, but the arguments don't match.
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
^^^^^^
I need Body text at the centre of the screen and the button at the bottom right corner.

Answer 1

The floatingActionbutton needs to be in a Scaffold widget.
I added a demo code(using your widget tree) below:
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: InputPage(),
// floating action button needs to be in the Scaffold widget
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Center(
child: Text('Body Text'),
);
}
}

Answer 2

Your code is almost right. The only thing wrong about is that you're trying to set the Floating Action Button (FAB) as a parameter to Center. Instead, put it in a column like this:
import 'package:flutter/material.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: InputPage(),
),
);
}
}
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Text('Body Text'),
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
],
),
);
}
}
While the code I just typed works fine, you might want to know that a FAB is typically used with a scaffold. It doesn't HAVE to be, but that's how most people use it. That's why there is a dedicated scaffold parameter for a FAB. You can do it like so:
Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {},
),
appBar: AppBar(
.......
)