Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
UI Screen for HomeView
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'home_viewmodel.dart';
class HomeView extends StatelessWidget {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ViewModelBuilder<HomeViewModel>.reactive(
viewModelBuilder: () => HomeViewModel(),
onModelReady: (viewModel) => viewModel.setUp(),
builder: (context, viewModel, child) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.black,
title: const Text('Todo List'),
centerTitle: true,
),
body: viewModel.isBusy
? const Center(
child: CircularProgressIndicator(
color: Colors.black,
),
)
: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: viewModel.todosList.isEmpty
? const Center(
child: Text(
'No Todo added yet',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
)
: ListView.builder(
itemCount: viewModel.todosList.length,
itemBuilder: (context, index) {
return Card(
color: Colors.primaries[Random()
.nextInt(Colors.primaries.length)]
.withOpacity(0.5),
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 16,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
viewModel.todosList[index]
.todoName,
style: const TextStyle(
fontWeight:
FontWeight.bold,
fontSize: 18,
),
),
const SizedBox(height: 4),
Text(
viewModel.todosList[index]
.todoContent,
maxLines: 1,
style: const TextStyle(
fontWeight:
FontWeight.w500,
fontSize: 16,
overflow:
TextOverflow.ellipsis,
),
),
const SizedBox(height: 16),
Text(
viewModel
.todosList[index].date,
style: const TextStyle(
fontWeight:
FontWeight.w500,
fontSize: 12,
),
),
],
),
),
IconButton(
onPressed: () {
viewModel.deleteTodo(viewModel
.todosList[index].id);
},
icon: const Icon(
Icons.cancel,
size: 32,
),
)
],
),
),
);
},
),
)
],
),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.black,
child: const Icon(Icons.add),
onPressed: () => viewModel.navigateToAddTodoPage(),
),
);
},
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment