Getting floating action button error in the flutter app

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(
      ....... 
  )