플러터 기초

앱바안에 텍스트 넣는법/설정 등등, 바틈네비게이션 크기조절하는법,

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('앱바'),
          centerTitle: false,
          elevation: 0.0,
        ),
        body:Text('안녕'),
        bottomNavigationBar: BottomAppBar(
          elevation: 1,
          child: SizedBox(
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: const [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],

            ),
          ),
        )
      )
    );
  }
}

데코

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(
      home: Scaffold(
        appBar: AppBar(title: Text('앱')),
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity, height: 50,
            margin: EdgeInsets.fromLTRB(0,30,0,0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black),color:Colors.blue
            ),
            child: Text('ddddd')
          ),
        ),

      )
    );
  }
}

텍스트 스타일

import 'dart:html';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임',
          style: TextStyle(
          color: Colors.red,

        ),
        ),
        ),
        body: Container(

          child: Text('안녕하세요',
            style: TextStyle(
              color: Color.fromRGBO(21, 85, 224, 0.3),
              fontSize:30,
              fontWeight: FontWeight.w900
              ),
            ),

        ),
        ),
      );

  }
}

리딩이랑 액션 버튼

import 'dart:html';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임',
          style: TextStyle(
          color: Colors.red,
          ),
        ),
          leading: Icon(Icons.star
          ),
          actions: [Icon(Icons.star),Icon(Icons.star)],
        ),
        body: SizedBox(
          child: ElevatedButton(
            child: Image.asset('pic1'),
            onPressed: (){},

          ),
        )
        ),
      );

  }
}

당근마켓 페이지 따라 만들기

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(Myapp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            elevation: 0.3,
            backgroundColor: Colors.white,
            title: Row(
                children : [Text('금호동3가',style: TextStyle(color: Colors.black),),IconButton(
                  visualDensity: VisualDensity(horizontal: -4.0,vertical: -4.0),
                  icon : Icon(Icons.expand_more,color: Colors.black,),
                  onPressed: (){},)]
            ),
            actions: [IconButton(
              visualDensity: VisualDensity(horizontal: -4.0,vertical: -4.0),
              icon : Icon(Icons.search,color: Colors.black,),
              onPressed: (){},),IconButton(
              visualDensity: VisualDensity(horizontal: -4.0,vertical: -4.0),
              icon : Icon(Icons.menu,color: Colors.black,),
              onPressed: (){},),IconButton(
              visualDensity: VisualDensity(horizontal: -4.0,vertical: -4.0),
              icon : Icon(Icons.add_alert,color: Colors.black,),
              onPressed: (){},)],


          ),
          body: Container(
            margin: EdgeInsets.all(8.0),
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: [Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [Flexible(child: Image.asset('pic1.png'),flex: 3,),Flexible(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [Text('BDSR 후드티(자수프린팅, 멋있음)',style: TextStyle(fontWeight: FontWeight.w800,fontSize: 15),),
                      Text('금정구 장전동 끌올 10분전',style: TextStyle(fontSize: 10),),
                      Text('43,900원',style: TextStyle(fontWeight: FontWeight.w800,fontSize: 15),),
                      Row(mainAxisAlignment: MainAxisAlignment.end,
                        children: [IconButton(onPressed: (){}, icon: Icon(Icons.favorite_outline_sharp),iconSize: 18,),Text('4')],
                      ),],
                  ),flex: 7
                  ,)],
              ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [Flexible(child: Image.asset('pic1.png'),flex: 3,),Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [Text('BDSR 후드티(자수프린팅, 멋있음)',style: TextStyle(fontWeight: FontWeight.w800,fontSize: 15),),
                        Text('금정구 장전동 끌올 10분전',style: TextStyle(fontSize: 10),),
                        Text('43,900원',style: TextStyle(fontWeight: FontWeight.w800,fontSize: 15),),
                        Row(mainAxisAlignment: MainAxisAlignment.end,
                          children: [IconButton(onPressed: (){}, icon: Icon(Icons.favorite_outline_sharp),iconSize: 18,),Text('4')],
                        ),],
                    ),flex: 7
                    ,)],
                )],

            ),
          ),
        )
    );

  }
}

커스텀위젯

import 'package:flutter/cupertino.dart';
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(
      home: Scaffold(
        appBar: AppBar(),
        body: ShopItem(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text("안녕"),
    );
  }
}

숙제

 

import 'package:flutter/cupertino.dart';
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(
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: [hong(),hong(),hong()
          ],
        ),
        bottomNavigationBar: bottom(),
      ),
    );
  }
}
class hong extends StatelessWidget {
  const hong({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      child: Row(

        children: [Icon(Icons.person,size: 40,),SizedBox(width: 5,),Text('홍길동',style:TextStyle(
          fontSize: 18
        ) ,)],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      elevation: 1,
      child: SizedBox(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [IconButton(onPressed: null, icon: Icon(Icons.call)),
            IconButton(onPressed: null, icon: Icon(Icons.message)),
            IconButton(onPressed: null, icon: Icon(Icons.contact_page)),],
        ),
      ),
    );
  }
}