Flutter: An initial home page using ListView, ListTile, and FloatingActionButton

By Alvin Alexander. Last updated: April 11, 2022

This may not make sense to most people, but if you ever want a simple replacement Flutter “home page” for a new app, this should work. All it does is create a home page with a ListView, and you can use those ListView items as simple menu items to get started with.

I also added a FloatingActionButton in case you want that to start with as well. Note that you’ll probably want to remove the @dart line for modern Flutter apps. (I’ll try to remember to update this code the next time I use it.)

I prefer this to the default home page you get when running flutter create my_app. My goal is to be able to highlight the default Flutter home, delete that code, and replace it with this code as a simple starter menu.

Here’s the code:

// @dart=2.9
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  static const title = 'My Test App';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: title),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
    // add anything you need here
  }

  @override
  Widget build(BuildContext context) {
    // this method is rerun every time setState is called
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: ListView(
        children: [
        
          // common icons
          // Icons.all_inclusive
          // Icons.insert_photo_outlined
          // Icons.settings
          // Icons.help_outline

          ListTile(
            leading: const Icon(Icons.all_inclusive),
            title: const Text('ListView Example'),
            // onTap: () => Navigator.push(
            //   context,
            //   MaterialPageRoute(builder: (context) => const LoadingNext()),
            // ),
          ),

          // ListTile(
          //   tileColor: const Color.fromARGB(8, 0, 0, 0),
          //   leading: const Icon(Icons.insert_photo_outlined),
          //   title: const Text('Manage Images'),
          //   onTap: () => Navigator.push(
          //     context,
          //     MaterialPageRoute(builder: (context) => const PhotoList()),
          //   ),
          // ),
        ],
      ),

      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Image',
        onPressed: () {  
        },
        child: const Icon(Icons.add),
      ),

    ); //build
  }
}

If you ever want a simple replacement Flutter home page to start working on a new app, I hope this is helpful.

flutter

home