Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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,
      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: () {},
            

    Thanks for contributing an answer to Stack Overflow!

    • Please be sure to answer the question. Provide details and share your research!

    But avoid

    • Asking for help, clarification, or responding to other answers.
    • Making statements based on opinion; back them up with references or personal experience.

    To learn more, see our tips on writing great answers.