대학 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
                              ),))
                      ],
                    ),
                  ),
                );
              }),
        ),
      ),
    );
  }
}

좋은 웹페이지 즐겨찾기