Resize Flutter FloatingActionButton - dart

Question

I can't figure out how to make the FAB smaller inside the first Container in the list. It seems to want to occupy the complete container, no matter what I try. Ive even tried a container within a container. The complete Orange area is clickable. I tried SizedBox, same result. Here is the code.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final title = 'Horizontal List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
padding: EdgeInsets.all(30),
height: 200.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160,
color: Colors.yellowAccent,
child: SizedBox(
height: 50,
width: 50,
child: FittedBox(
child: FloatingActionButton(
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.indigo,
child: Icon(Icons.add, size: 20),
onPressed: () {},
),
),
),
),
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
),
),
);
}
}

Answer 1

I have 2 samples. And Please refer Basic Widgets for more detail.
Use margin of Container. Please refer the code as below:
child: SizedBox(
height: 50,
width: 50,
child: Container(
margin: EdgeInsets.only(left:80.0, top:80.0, bottom: 10.0) ,
child: FloatingActionButton(
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.indigo,
child: Icon(Icons.add),
onPressed: () {},
),
),
),
Use Row or Column. Please refer the code as below:
child: SizedBox(
height: 50,
width: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[ FloatingActionButton(
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.indigo,
child: Icon(Icons.add),
onPressed: () {},
),
]),
),