본문 바로가기
  • GDG on campus Ewha Tech Blog
3-2기 스터디/플러터

[5주차] 튜토리얼 영상 #18-#22

by naegajoa 2022. 5. 31.

5주차 플러터 스터디에서는 플러터 튜토리얼 영상을 #18에서 #22까지 학습하였습니다.

(밑의 코드 언어는 모두 Dart입니다.)

영상 주소 : https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ 

 

Flutter Tutorial for Beginners

In this Flutter tutorial for Beginners series, I'll show you how to use Flutter (and Dart) to create Android and iOS apps from scratch. We'll learn all about...

www.youtube.com

 

#18. Custom Classes

import 'package:flutter/material.dart';

void main() => runApp(materialApp(
	home : QuoteList(),
));//materialApp


class QuoteList extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<String> quotes=[
		'문장1',
		'문장2',
		'문장3'
	];
	//List<String> authoes=['']-> 아렇게 하지 않고 lib폴더에서 quote.dart 클래스를 새로 생성하고 거기에코드를 작성한다..
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				children:quotes.map((quote) => Text(quote)).toList(),
		),//Column
	);//Scaffold
 }
}
import 'package:flutter/material.dart';

void main() => runApp(materialApp(
	home : QuoteList(),
));//materialApp


class QuoteList extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<String> quotes=[
		'문장1',
		'문장2',
		'문장3'
	];
	//List<String> authoes=['']-> 아렇게 하지 않고 lib폴더에서 quote.dart 클래스를 새로 생성하고 거기에코드를 작성한다..
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				children:quotes.map((quote) => Text(quote)).toList(),
		),//Column
	);//Scaffold
 }
}
//quote.dart를 작성하고 main.dart에 import한 코드
import 'package:flutter/material.dart';
import 'quote.dart';

void main() => runApp(materialApp(
	home : QuoteList(),
));//materialApp


class QuoteList extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<Quote> quotes=[
		Quote(author: 'oscar wilde', text : '문장1'),
		Quote(author: 'oscar wilde', text : '문장2'),
		Quote(author: 'oscar wilde', text : '문장3'),
	];
	//List<String> authoes=['']-> 아렇게 하지 않고 lib폴더에서 quote.dart 클래스를 새로 생성하고 거기에코드를 작성한다..
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				children:quotes.map((quote) => Text('${quote.text} - ${quote.author}')).toList(),
		),//Column
	);//Scaffold
 }
}

 

#19. Cards

//quote.dart를 작성하고 main.dart에 import한 코드
import 'package:flutter/material.dart';
import 'quote.dart';

void main() => runApp(materialApp(
	home : QuoteList(),
));//materialApp


class QuoteList extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<Quote> quotes=[
		Quote(author: 'oscar wilde', text : '문장1'),
		Quote(author: 'oscar wilde', text : '문장2'),
		Quote(author: 'oscar wilde', text : '문장3'),
	];

	Widget quoteTemplate(quote){
		return Card(
			margin:EdgeInsets.fromLTRB(16.0,16.0,16.0,0.0),
			chile :Column(
				childeren: <Widget>[
					Text(
						quote.text
						style.TextStyle(
							fontSize:18.0,
							color:Color.grey[600],
						)//TextStyle
					),//Text
					SixzedBox(height:6.0),
					Text(
						quote.text
						style.TextStyle(
							fontSize:14.0,
							color:Color.grey[600],
					),//Text
				];//<Widget>[]
			),//Column
		);//Card
	};
	
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				children:quotes.map((quote) => quoteTemplate(quote)).toList(),
		),//Column
	);//Scaffold
 }
}

 

#20. Extracting Widgets

//quote.dart를 작성하고 main.dart에 import한 코드
import 'package:flutter/material.dart';
import 'quote.dart';

void main() => runApp(materialApp(
	home : QuoteCard(),
));//materialApp


class QuoteCard extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<Quote> quotes=[
		Quote(author: 'oscar wilde', text : '문장1'),
		Quote(author: 'oscar wilde', text : '문장2'),
		Quote(author: 'oscar wilde', text : '문장3'),
	];
/*
	Widget quoteTemplate(quote){
		return QuoteCard(quote : quote);//name파라미터로 전달
}
*/
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				//children:quotes.map((quote) => quoteTemplate(quote)).toList(),
				children:quotes.map((quote) => QuoteCard(quote : quote).toList(),
//->위에 있던 Widget quoteTemplate를 삭제하면서 QuoteCard(quote : quote)를 이용하여 코드를 더 간결하게 만들음.
		),//Column
	);//Scaffold
 }
}
class QuoteCard extends StatelessWidget{
	final Quote quote; //final을 써서 변하지 않음
	Quote({this.quote});
/*
	const QuoteCard({
		Key key,
	}) : super(key: key);
*/
@override
 Widget build(BuildContext context){
		return Card(
			margin:EdgeInsets.fromLTRB(16.0,16.0,16.0,0.0),
			chile :Column(
				childeren: <Widget>[
					Text(
						quote.text
						style.TextStyle(
							fontSize:18.0,
							color:Color.grey[600],
						)//TextStyle
					),//Text
					SixzedBox(height:6.0),
					Text(
						quote.text,
						style.TextStyle(
							fontSize:14.0,
							color:Color.grey[600],
					),//Text
				];//<Widget>[]
			),//Column
		);//Card
 };
}
//quote_card.dart파일을 새로 만들음
import 'package:flutter/material.dart';
import 'quote.dart';

class QuoteCard extends StatelessWidget{
	final Quote quote; //final을 써서 변하지 않음
	Quote({this.quote});
/*
	const QuoteCard({
		Key key,
	}) : super(key: key);
*/
@override
 Widget build(BuildContext context){
		return Card(
			margin:EdgeInsets.fromLTRB(16.0,16.0,16.0,0.0),
			chile :Column(
				childeren: <Widget>[
					Text(
						quote.text
						style.TextStyle(
							fontSize:18.0,
							color:Color.grey[600],
						)//TextStyle
					),//Text
					SixzedBox(height:6.0),
					Text(
						quote.text,
						style.TextStyle(
							fontSize:14.0,
							color:Color.grey[600],
					),//Text
				];//<Widget>[]
			),//Column
		);//Card
 };
}

 

#21. Functions as Parameters

//quote_card.dart
import 'package:flutter/material.dart';
import 'quote.dart';

class QuoteCard extends StatelessWidget{
	final Quote quote; //final을 써서 변하지 않음
	final Function delete;
	Quote({this.quote,this.delate});
/*
	const QuoteCard({
		Key key,
	}) : super(key: key);
*/
@override
 Widget build(BuildContext context){
		return Card(
			margin:EdgeInsets.fromLTRB(16.0,16.0,16.0,0.0),
			chile :Column(
				childeren: <Widget>[
					Text(
						quote.text
						style.TextStyle(
							fontSize:18.0,
							color:Color.grey[600],
						)//TextStyle
					),//Text
					SixzedBox(height:6.0),
					Text(
						quote.text,
						style.TextStyle(
							fontSize:14.0,
							color:Color.grey[600],
					),//Text
					SixzedBox(height:8.0),
					FlatButton.icon(
						onPressed : delete,
						label:Text('delete quote'),
						icon: Icon(Icons.delete),
						)//FlatButton.icon
				];//<Widget>[]
			),//Column
		);//Card
 };
}
//main.dart
import 'package:flutter/material.dart';
import 'quote.dart';

void main() => runApp(materialApp(
	home : QuoteCard(),
));//materialApp


class QuoteCard extends StatefulWidget{
	@override
	_QuoteListState createState()=> _QuoteListstate();
}

class _QuoteListState extends State<QuoteList>{
	List<Quote> quotes=[
		Quote(author: 'oscar wilde', text : '문장1'),
		Quote(author: 'oscar wilde', text : '문장2'),
		Quote(author: 'oscar wilde', text : '문장3'),
	];
/*
	Widget quoteTemplate(quote){
		return QuoteCard(quote : quote);//name파라미터로 전달
}
*/
 @override
 Widget build(BuildContext context){
	return Scaffold(
			backgroundColor: Colors.gray[200],
			appBar :AppBar(
				title : Text('Awesome Quotes'),
				centerTitle : true,
				backgroundColor : Colors.redAccent,
		),//AppBar
			body : Column(
				//children:quotes.map((quote) => quoteTemplate(quote)).toList(),
				children:quotes.map((quote) => QuoteCard(
					quote : quote,
					delete : (){
						setState((){
							quotes.remove(quote);
						});
					};
					)).toList(),
//->위에 있던 Widget quoteTemplate를 삭제하면서 QuoteCard(quote : quote)를 이용하여 코드를 더 간결하게 만들음.
		),//Column
	);//Scaffold
 }
}
class QuoteCard extends StatelessWidget{
	final Quote quote; //final을 써서 변하지 않음
	Quote({this.quote});
/*
	const QuoteCard({
		Key key,
	}) : super(key: key);
*/
@override
 Widget build(BuildContext context){
		return Card(
			margin:EdgeInsets.fromLTRB(16.0,16.0,16.0,0.0),
			chile :Column(
				childeren: <Widget>[
					Text(
						quote.text
						style.TextStyle(
							fontSize:18.0,
							color:Color.grey[600],
						)//TextStyle
					),//Text
					SixzedBox(height:6.0),
					Text(
						quote.text,
						style.TextStyle(
							fontSize:14.0,
							color:Color.grey[600],
					),//Text
				];//<Widget>[]
			),//Column
		);//Card
 };
}

 

#22. Starting the World Time App

//main.dart
import 'package:flutter/material.dart';
import 'package:world_time/pages/home.dart';
import'pages/home.dart';

void main()=> runApp(MaterialApp(
	home: Home(),
));//MaterialApp
//    ./pages/home.dart
import 'package : flutter/material.dart';

class Home extends StatefulWidget{
	@override
	_HomeStste createState()=> _HomeState();
}

class _HomeState extends State<Home>{
	@override
	Widget build(BuildContext context){
		return Scaffold(
			body: SafeArea(child: Text('Home Screen')),
		);//Scaffold
	}
}
//    ./pages/choose_location.dart
import 'package : flutter/material.dart';

class ChooseLocation extends StatefulWidget{
	@override
	_ChooseLocationStste createState()=> _ChooseLocationState();
}

class _ChooseLocationState extends State<ChooseLocation>{
	@override
	Widget build(BuildContext context){
		return Scaffold(
			body: Text('choose location screen'),
		);//Scaffold
	}
}
//    ./pages/loading.dart
import 'package : flutter/material.dart';

class Loading extends StatefulWidget{
	@override
	_LoadingStste createState()=> _LoadingState();
}

class _LoadingState extends State<Loading>{
	@override
	Widget build(BuildContext context){
		return Scaffold(
			body: Text('loading Screen'),
		);//Scaffold
	}
}

 

 

저작자표시 비영리

'3-2기 스터디 > 플러터' 카테고리의 다른 글

[7주차] 튜토리얼 영상 #23-26  (0) 2022.06.25
[6주차] Codelab - Basic Flutter layout concepts  (0) 2022.06.23
[4주차] 튜토리얼 영상 #15-17  (0) 2022.05.23
[3주차] 튜토리얼 영상 #8-#14  (0) 2022.05.03
[2주차] 튜토리얼 영상 #4-#7  (0) 2022.04.08

관련글

댓글

티스토리툴바