Designing a time Traccking Application in Flutter

Question

I am currently trying to write an application with which I can track my time. And i wanted to find the best way to do this in flutter.

My latest idea was to just use an appbar as the header with which my time tracking could be started. But I think this isn't a very elegant way to do so. If you think otherwise, please let me know.

I have also tried using Rows and Columns but this doesn't work with a Listview inside, or does it?

This is how it currently looks (appbar on top and Listview with sample items below):

My current Code:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: const TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'reason',
          ),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.play_arrow),
          ),
        ],
      ),
      body: StreamBuilder(
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Center(child: Text('${snapshot.error}'));
            } else if (snapshot.hasData) {
              var personList = snapshot.data as List<Person>;
              return ListView.builder(
                  itemCount: personList.length,
                  itemBuilder: (context, index) {
                    return Slidable(
                      endActionPane: ActionPane(
                        children: [
                           ...
                        ],
                      ),
                      child: ListTile(
                        title: Text(...),
                      ),
                    );
                  });
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }

Answer 1

Though your question is not totally clear to me. If you face any problem regarding AppBar then you can create a custom AppBar and you can do anything in your AppBar as you want. Likewise given code you can create a custom AppBar.

class MainAppBar extends StatelessWidget with PreferredSizeWidget {
  const MainAppBar({
    Key? key,
  }) : super(key: key); 

  @override
  Widget build(BuildContext context) {
    return AppBar(
      automaticallyImplyLeading: false,
      titleSpacing: 0,
      title: Padding(
        padding: const EdgeInsets.all(22.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

If it's work for you please, let me know. Thanks.