본문 바로가기

플러터/Card UI 만들기4

[Card UI] 전체코드 1. main.dart //메인 import 'package:flutter/material.dart'; import 'button.dart'; import 'card.dart'; class Player{ String name; Player({required this.name}); } void main() { var jiwoo = Player(name: "jiwoo"); runApp(App()); } class App extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFF181818), body: SingleChildSc.. 2024. 3. 17.
[Card UI] Card Section / Icons and Transforms / Reusable Card 만들기 1. Card Section 만들기 import 'package:flutter/material.dart'; import 'button.dart'; void main() { runApp(App()); } class App extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFF181818), body: Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children.. 2024. 3. 17.
[Card UI] Button Section / Reusable Button 버튼 만들기 : Container 이용해서 버튼의 모양을 만들 수 있다.(container = HTML의 div) import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFF181818), body: Padding( padding: EdgeInsets.symmetric(horizontal: 40), child: Column( crossAxisAlignment: CrossAxisAli.. 2024. 3. 17.
[Card UI] Head 부분 만들기 화면의 윗부분에 해당하는 Head 만들기 : 간단하게 회원의 이름과 인사말을 작성하도록 해보자. >> Column = 글을 위 아래로 두기 위해서 사용 >> Row = 글을 양 옆으로 두기 위해서 사용 import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFF181818),//배경색 지정 body: Padding( padding: EdgeInsets.symmetric(horizon.. 2024. 3. 17.