CodeingTestPrac

Flutter2

sung.hyun.1204 2022. 1. 21. 13:46

resource  

1.

https://icons8.kr/

 

무료 아이콘, 클립아트, 사진 및 음악

사진 일러스트레이션 음악

icons8.kr

2.

https://www.vecteezy.com/

 

Download Free Vector Art, Stock Photos & Stock Video Footage

Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs from artists around the world!

www.vecteezy.com

 

3.

https://dribbble.com/

 

3.

canva

 

 

Hotreload:

statelessWidget

margin,padding , SafeArea()

https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482114#overview

 

 

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
{
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

# 화면 사이드바 -> drawer 위젯  ,  default setting을 풀어 줘야 한다 . 

 

 

 

 

 

# 화면 이동을 위한

onPressed

 

 

import 'login_screen.dart';

 

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    elevation: 5.0,
    color: Colors.lightBlueAccent,
    borderRadius: BorderRadius.circular(30.0),
    child: MaterialButton(
      onPressed: () {
        //Go to login screen.
        Navigator.pushNamed(context,LoginScreen.id);
      },

      minWidth: 200.0,
      height: 42.0,
      child: Text(
        'Log In',
      ),
    ),
  ),
),

 

 

 

파이어 베이스 리얼 타입  : json

cloudfirestore : NOSQL

 

 

1.flutter -  firebsse -  spring

2. flutter - spring

 

 

 

 

app bar when ressed action button open drawer

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(

      automaticallyImplyLeading: false,// for custom icon option setting down below

      title: Image.asset('GDSCLOGO.jpg'),
      actions: [
        IconButton(
            onPressed: () => Navigator.of(context)
                .push(MaterialPageRoute(builder: (_) => Search_Screen())),
            icon: Icon(Icons.search))
      ],
      leading: IconButton(
        icon:  Icon(Icons.person_rounded),
        onPressed: () =>Scaffold.of(context).openDrawer(),
      ),

 

 

[Flutter] AppBar에 Title, leading icon, actions icon 붙이기



출처: https://fenderist.tistory.com/117 [Devman]

 

[Flutter] AppBar에 Title, leading icon, actions icon 붙이기

[Flutter] AppBar에 Title, leading icon, actions icon 붙이기 ​ AppBar에 Title과 Leading Icon 그리고 Actions Icon을 붙여 보겠습니다. 결과물은 아래의 이미지와 같습니다. flutter AppBar 소스코드는 아래..

fenderist.tistory.com

 

자료 : sns 어플  만들기

https://100sucoding.tistory.com/23?category=945334/ 

 

플러터로 SNS어플 만들기 4. 실제 단말기연결,앱 아이콘 만들기

이번시간에는 휴대폰에서 빌드하기 와 앱 아이콘을 만들어볼거에요. 플러터로 만든 기본앱을 에뮬레이터나 실제 단말기에 깔면 빨강색으로 동그라미 친거처럼 아이콘이 저렇게 나와요. 근데

100sucoding.tistory.com

 

 

 

아마,, 구독하기 버튼용 :

https://pythonkim.tistory.com/114/

 

14. 플러터 : 버튼 + 사진

예정에 없던 코드가 추가됐다. 예제란 것은 보는 사람의 동기를 부여할 수 있어야 하는데.. 간단하게 구성할 때는 사진만한 것이 없다. 버튼 두 개로 사진을 번갈아 보여주는 코드를 만들었다.

pythonkim.tistory.com

 

 

onTap(). : other widget

 

onPressed() : just button 

 

Inkwell  : 

컨테이너와 같이 별도의 제스쳐 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가하고자 할 때 InkWell 위젯을 이용할 수 있다.

 

 

 

화면 상단 뒤로 가기 : 네비게이션 클라스 이용