이번에는 TabBar를 만들어 볼 것이다 TabBar란 무엇이냐면 사진으로 설명하자면 아래와 같다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return Mat..
모든 웹이나 앱에는 Button이 있다 그리고 그 Button은 각자 스타일이 다 있다. 이번에는 각자 스타일을 주는 버튼을 한번 만들어 보도록 할테당 1. 기본 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(Bui..
이번에는 모서리를 둥글게 해 보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: const PracticeP..
저번에는 Image를 넣고 가로넓이, 새로 넓이 조절하는 법과 BoxFit을 사용하는 법을 배웠다 https://initstory.tistory.com/114 이번에는 가로넓이, 새로넓이를 조절하지 않고 화면비율대로 조절하는 법을 하겠다 이때는 AspectRatio 라는 위젯을 사용한다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);..
이번에는 Flutter에서 Image를 넣는 법을 하겠다. 1. 이미지 폴더 만들기 최상위 프로젝트 폴더를 마우스 오른쪽클릭한 후 New > Directory를 클릭한다 New Directory라고 나오고 밑에 입력칸이 있다 거기에 assets를 입력하고 enter를 누르자 그럼 위와 같이 assets폴더가 생성된 것을 확인할 수 있다 2. pubspec.yaml 파일 설정 기본 경로를 설정해야 하기 때문에 pubspec.yaml파일을 뭔가를 적어야 한다 pubspec.yaml 파일을 더블클릭한다 pubspec.yaml 스크롤을 내리다보면 flutter: 가 보일텐데 그 밑에 주석으로 처리된 assets가 있으면 스크롤을 멈춘다 주석으로 처리된 assets부분을 위와 같이 해준다 ※ 반드시 들여 쓰기를 ..
Flutter의 화면에서 왼쪽배치를 할 것인지, 가운데에 배치할 것이 아니면 위에 아니면 밑에 배치할 것인지 정하게 하는 방법 이 있다 Column일 경우와 Row일 경우에 배치하는 법을 알아보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your applicatio..
이번에는 Padding에 대해서 조금 알아보자 Padding을 사용했을 경우, padding을 얼마나 줄 것인가에 대해서다 padding을 줄때 예를 들면 아래처럼 사용한다 padding: EdgeInsets.all(10) 1. 예제 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your..
1. ListView ListView는 새로 스크롤을 생기게 하는 방법이다. 일단 처음 코드를 보도록 한다 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return Materi..
