[Flutter] 메모 8
2020. 12. 27. 23:59ㆍFlutter Mobile App/Flutter 메모 앱
반응형
메모 레이아웃 개선
홈 페이지
[screens/home_page.dart]
더보기
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:memo/model/memo.dart';
import 'write_page.dart';
import 'package:memo/repository/db_helper.dart';
class HomePage extends StatefulWidget {
final String title;
HomePage({Key key, this.title}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Future<String> _calculation = Future<String>.delayed(
Duration(seconds: 2),
() => 'Data Loaded',
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20, top: 40, bottom: 20),
child: Container(
child: Text(
'메모',
style: TextStyle(fontSize: 36, color: Colors.blue),
),
alignment: Alignment.centerLeft,
),
),
Expanded(
child: memoBuilder(),
)
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
print('[+ 메모 추가 액션버튼] 클릭');
Navigator.push(
context, MaterialPageRoute(builder: (context) => WritePage()));
},
tooltip: '+',
label: Text('메모 추가'),
icon: Icon(Icons.add),
),
);
}
Future<List<Memo>> loadMemo() async {
DBHelper dbHelper = DBHelper();
return await dbHelper.selectMemos();
}
Widget memoBuilder() {
return FutureBuilder(
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data.isEmpty) {
return Center(
child: Text(
'지금 바로 "메모 추가" 버튼을 눌러\n 새 메모를 추가해보세요!',
style: TextStyle(
fontSize: 15,
color: Colors.blueAccent,
),
textAlign: TextAlign.center,
));
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Memo memo = snapshot.data[index];
return Container(
height: 90,
margin: EdgeInsets.only(left: 20, top: 0, bottom: 15, right: 20),
padding: EdgeInsets.only(left: 15, top: 10, bottom: 15, right: 15),
child: Column(
children: [
Container(
child: Text(
memo.title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500
),
),
alignment: Alignment.topLeft,
),
Container(
child: Text(
memo.text,
style: TextStyle(fontSize: 15),
textAlign: TextAlign.left,
),
alignment: Alignment.topLeft,
),
Container(
child: Text(
'최종 수정 시간 : ${memo.editedTime.split('.')[0]}',
style: TextStyle(fontSize: 12),
),
alignment: Alignment.bottomRight,
),
],
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.blue, width: 1),
boxShadow: [
BoxShadow(
color: Colors.blue,
blurRadius: 3
)
],
borderRadius: BorderRadius.circular(12),
),
);
},
);
}
},
future: loadMemo(),
);
}
}
반응형
'Flutter Mobile App > Flutter 메모 앱' 카테고리의 다른 글
[Flutter] 메모 10 (0) | 2020.12.28 |
---|---|
[Flutter] 메모 9 (0) | 2020.12.28 |
[Flutter] 메모 7 (0) | 2020.12.27 |
[Flutter] 메모 6 (0) | 2020.12.27 |
[Flutter] 메모 5 (0) | 2020.12.27 |