대학 LMS강의 스케쥴앱 만들어보기(과목 선택 페이지)

앱 구성은 페이지 상단에 학생 이미지를 넣고
스크롤를 통해 과목을 선택할 수 있게 구성하였습니다.

<실제 구현>

아직 백이 준비가 안됐기 때문에 이미지와 제목은 공백으로 남겨 두었습니다.
앱의 대표 컬러는 민트와 화이트레드이기때문에 투톤에 맞는 디자인을 짜보았습니다.

<구현 코드입니다.(flutter)>

import 'package:flutter/material.dart';
import 'package:grade_protector/APi/Api.dart';
import 'package:grade_protector/Color/colors.dart';
import 'package:grade_protector/screen/scroll_page.dart';

class Home_page extends StatefulWidget {
  @override
  _Home_pageState createState() => _Home_pageState();
}

class _Home_pageState extends State<Home_page> {
  Color mint=Use_Colors().get_mint_colors();
  Color r_color = Use_Colors().get_R_colors();
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return MaterialApp(
      home:  Scaffold(
        backgroundColor: r_color,
        appBar: AppBar(
          backgroundColor: mint,
          elevation: 0,
          leading: IconButton(
            color: Colors.black,
            icon: Icon(Icons.arrow_back_ios),
            onPressed: (){
              Navigator.of(context).pop();
            },
          ),
        ),
        body: Column(
          children: [
            Container(
              height: size.height*0.26,
                color: r_color,
                child: Stack(
                  children: [
                    Container(
                      height: size.height *0.2-10,
                      decoration: BoxDecoration(
                        color: mint,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(123),
                        )
                      ),
                    ),
                    Positioned(
                      bottom: 20,
                        left: size.width*0.36,
                        child: Container(
                          height: 130,
                          width: 130,
                          decoration: BoxDecoration(
                             color: Colors.white,
                            borderRadius: BorderRadius.circular(360)
                          ),
                        ))
                  ],
                )),
            Flexible(
                flex: 6,
                child: ListView.separated(
                  padding: EdgeInsets.only(right: 20,left: 20,),
                    itemCount: 6,
                    itemBuilder: (BuildContext context,int? index){
                      return Container(
                        height: 100,
                        color: Colors.white,
                        child: Row(
                          children: [
                            Flexible(
                                flex:3,
                                child: Container(
                                  color: r_color,
                                  child: Stack(
                                    children: [
                                      Container(
                                        height: 100,
                                        width: 100,
                                        decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.all(Radius.circular(360))
                                        ),
                                      )
                                    ],
                                  ),
                                  // decoration: BoxDecoration(
                                  //   borderRadius: BorderRadius.all(Radius.circular(360))
                                  // ),
                                )),
                            Flexible(
                                flex:6,
                                child: Container(
                                  //padding: EdgeInsets.only(left: 10),
                                )),
                            Flexible(
                                flex:3,
                                child: Container(
                                  padding: EdgeInsets.only(left: 40),
                                  child: IconButton(
                                    iconSize: 40,
                                    icon: Icon(Icons.arrow_downward,color: r_color,),
                                    onPressed: (){
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(builder: (context) => Scroll_Page()),
                                      );
                                    },
                                  ),
                                )),
                          ],
                        ),
                      );
                    },
                  separatorBuilder: (BuildContext context, int index)=> const Divider(),
                )),

          ],
        ),
      ),
    );
  }
}