대학 LMS강의 스케쥴앱 만들어보기(과제,퀴즈,강의 선택 페이지)
과제,퀴즈,강의 선택페이지는 애플의 앱스토어를 모티브로 만들어봤습니다.
이미지를 잘 활용하여 사용자입장에서 눈이 즐거운 앱 개발이라는 목표에 한 발 가까워진 것 같습니다.
<처음 앱의 구성입니다.>
이미지를 최대한 활용하였습니다.
<구현된 페이지>
이미지는 저작권이 없는 무료 이미지를 사용하였습니다.
제가 원하던 이미지가 없어서 이미지 부분이 많이 아쉬웠습니다.
<실제 구현 코드입니다.>
import 'package:flutter/material.dart';
import 'package:grade_protector/screen/Quiz.dart';
import 'package:grade_protector/screen/Task.dart';
import 'Lec.dart';
class Scroll_Page extends StatefulWidget {
@override
_Scroll_PageState createState() => _Scroll_PageState();
}
class _Scroll_PageState extends State<Scroll_Page> {
final img= [
"image/lec1.png",
"image/quize1.png",
"image/task1.png",
];
final texts=["강의","퀴즈","과제"];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("image/pexels-moose-photos-1037995.jpg"),
fit: BoxFit.cover
)
),
child: Scaffold(
backgroundColor: Colors.transparent,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: IconButton(
color: Colors.black,
icon: Icon(Icons.arrow_back_ios),
onPressed: (){
Navigator.of(context).pop();
},
),
),
body: ListView.separated(
separatorBuilder:(BuildContext context,int index){
return SizedBox(
height: 80,
);
},
padding: EdgeInsets.only(top: 70,left: 10,right: 10),
itemCount: 3,
itemBuilder: (BuildContext context, int index){
return Hero(
tag: texts[index],
child: FlatButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (_){
return index==0?Lec(img[index]):index==1?Quize(img[index]):Task(img[index]);
}));
},
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height*0.43,
padding: EdgeInsets.only(top: 30,bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
img[index]
),
fit: BoxFit.fill
),
color: Colors.lightBlue,
borderRadius: BorderRadius.all(Radius.circular(60))
),
),
Positioned(
top: 30,
right: 70,
child: Text(texts[index],
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.black,
fontSize: 45
),))
],
),
),
);
}),
),
),
);
}
}
Author And Source
이 문제에 관하여(대학 LMS강의 스케쥴앱 만들어보기(과제,퀴즈,강의 선택 페이지)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@junbeom-01/대학-LMS강의-스케쥴앱-만들어보기과제퀴즈강의-선택-페이지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)