Make Grid/Card View share the tile

This commit is contained in:
Vishesh Handa
2020-03-30 11:57:35 +02:00
parent 9cbe6dd389
commit 5c44905772
3 changed files with 84 additions and 127 deletions

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:gitjournal/core/note.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:gitjournal/core/notes_folder.dart';
import 'package:gitjournal/folder_views/note_tile.dart';
typedef void NoteSelectedFunction(Note note);
@ -38,7 +39,7 @@ class CardView extends StatelessWidget {
itemCount: folder.notes.length,
itemBuilder: (BuildContext context, int index) {
var note = folder.notes[index];
return _buildNoteCard(context, note);
return NoteTile(note, noteSelectedFunction);
},
staggeredTileBuilder: (int i) => const StaggeredTile.fit(2),
mainAxisSpacing: 8.0,
@ -50,58 +51,4 @@ class CardView extends StatelessWidget {
child: gridView,
);
}
Widget _buildNoteCard(BuildContext context, Note note) {
var body = note.body.trimRight();
body = body.replaceAll('[ ]', '');
body = body.replaceAll('[x]', '');
body = body.replaceAll('[X]', '');
var textTheme = Theme.of(context).textTheme;
var tileContent = Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
if (note.title != null && note.title.isNotEmpty)
Text(
note.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: textTheme.title,
),
if (note.title != null && note.title.isNotEmpty)
const SizedBox(height: 8.0),
Text(
body,
maxLines: 30,
overflow: TextOverflow.ellipsis,
style: textTheme.subhead,
),
],
crossAxisAlignment: CrossAxisAlignment.start,
),
);
const borderRadius = BorderRadius.all(Radius.circular(8));
var tile = Material(
borderRadius: borderRadius,
type: MaterialType.card,
child: Padding(padding: const EdgeInsets.all(4.0), child: tileContent),
);
/*var tile = Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[200]),
color: Colors.white,
borderRadius: borderRadius,
child: tileContent,
);*/
return InkWell(
child: tile,
borderRadius: borderRadius,
onTap: () => noteSelectedFunction(note),
);
}
}

@ -1,9 +1,7 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:gitjournal/core/note.dart';
import 'package:gitjournal/core/notes_folder.dart';
typedef void NoteSelectedFunction(Note note);
import 'package:gitjournal/folder_views/note_tile.dart';
class GridFolderView extends StatelessWidget {
final NoteSelectedFunction noteSelectedFunction;
@ -56,74 +54,6 @@ class GridFolderView extends StatelessWidget {
}
var note = folder.notes[i];
return _buildNote(context, note);
}
Widget _buildNote(BuildContext context, Note note) {
var body = note.body.trimRight();
body = body.replaceAll('[ ]', '');
body = body.replaceAll('[x]', '');
body = body.replaceAll('[X]', '');
var theme = Theme.of(context);
var textTheme = theme.textTheme;
var borderColor = theme.highlightColor.withAlpha(50);
if (theme.brightness == Brightness.dark) {
borderColor = theme.highlightColor.withAlpha(100);
}
var tileContent = Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(8)),
border: Border.all(color: borderColor),
),
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
if (note.title != null && note.title.isNotEmpty)
Text(
note.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: textTheme.title,
),
if (note.title != null && note.title.isNotEmpty)
const SizedBox(height: 12.0),
Flexible(
flex: 1,
child: Text(
body,
maxLines: 30,
overflow: TextOverflow.ellipsis,
style: textTheme.subhead,
),
),
],
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
),
);
const borderRadius = BorderRadius.all(Radius.circular(8));
var tile = Material(
borderRadius: borderRadius,
type: MaterialType.card,
child: tileContent,
);
/*var tile = Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[200]),
color: Colors.white,
borderRadius: borderRadius,
child: tileContent,
);*/
return InkWell(
child: tile,
borderRadius: borderRadius,
onTap: () => noteSelectedFunction(note),
);
return NoteTile(note, noteSelectedFunction);
}
}

@ -0,0 +1,80 @@
import 'package:flutter/material.dart';
import 'package:gitjournal/core/note.dart';
typedef void NoteSelectedFunction(Note note);
class NoteTile extends StatelessWidget {
final Note note;
final NoteSelectedFunction noteSelectedFunction;
NoteTile(this.note, this.noteSelectedFunction);
@override
Widget build(BuildContext context) {
var body = note.body.trimRight();
body = body.replaceAll('[ ]', '');
body = body.replaceAll('[x]', '');
body = body.replaceAll('[X]', '');
var theme = Theme.of(context);
var textTheme = theme.textTheme;
var borderColor = theme.highlightColor.withAlpha(50);
if (theme.brightness == Brightness.dark) {
borderColor = theme.highlightColor.withAlpha(100);
}
var tileContent = Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(8)),
border: Border.all(color: borderColor),
),
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
if (note.title != null && note.title.isNotEmpty)
Text(
note.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: textTheme.title,
),
if (note.title != null && note.title.isNotEmpty)
const SizedBox(height: 12.0),
Flexible(
flex: 1,
child: Text(
body,
maxLines: 30,
overflow: TextOverflow.ellipsis,
style: textTheme.subhead,
),
),
],
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
),
);
const borderRadius = BorderRadius.all(Radius.circular(8));
var tile = Material(
borderRadius: borderRadius,
type: MaterialType.card,
child: tileContent,
);
/*var tile = Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[200]),
color: Colors.white,
borderRadius: borderRadius,
child: tileContent,
);*/
return InkWell(
child: tile,
borderRadius: borderRadius,
onTap: () => noteSelectedFunction(note),
);
}
}