大学LMSカリキュラムアプリケーションの作成(選択ページ)
5323 ワード
アプリケーション構成は、ページ上部に学生画像を追加することです.
スクロールしてコースを選択します.
<実装>
パッケージの準備ができていないので、画像とタイトルは空白にします.
アプリの代表色がミント色と白赤なので、ダブルトーンに合ったデザインになっています.
<実装コード.(flutter)>
スクロールしてコースを選択します.
<実装>
パッケージの準備ができていないので、画像とタイトルは空白にします.
アプリの代表色がミント色と白赤なので、ダブルトーンに合ったデザインになっています.
<実装コード.(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(),
)),
],
),
),
);
}
}
Reference
この問題について(大学LMSカリキュラムアプリケーションの作成(選択ページ)), 我々は、より多くの情報をここで見つけました https://velog.io/@junbeom-01/대학-LMS강의-스케쥴-앱-만들어보기과목-선택-페이지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol