flutter(dart)

flutter(1)- 검색바와 GridView

칠구의 스터디 2023. 10. 28. 16:57

 

닥트를 이용하여 위의 사진 처럼 구현해보려고 한다.

즉 검색바와 GridView

 

 

검색바
Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    decoration: InputDecoration(
      hintText: '검색',
      icon: Icon(Icons.search),
    ),
  ),
)

나는 이코드를 사용했다.

TextField-> 이 코드가 검색바를 만들어줬고

hintText: '검색'-> 이 부분이 검색하기 전에 보이는 텍스트

icon: Icon(Icons.search)-> 이게 돋보기(?) 아이콘

여기서 중요한 점은 hintText: '검색', icon: Icon(Icons.search) -> 이걸 사용하려면

decoration: InputDecoration이걸 사용해야 한다는 점!!

 

이 코드는 간단한 검색바만 추가한 것으로 실제 검색이 되려면 코드를 더 추가해야 한다...

이 부분은 앞으로 추가할 예정...

 

https://yun-seyeong.tistory.com/19

 

Flutter - BoxDecoration 만들기 [9]

1. color색깔을 지정할 수 있다. class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( height: 150, width: 150, alignment: Alignment.center, decoration: BoxDecoration

yun-seyeong.tistory.com

https://while1.tistory.com/115

 

[Flutter] GridView 위젯

GridView 플러터의 GridView는 열 수를 지정하여 자식 위젯을 그리드 형태로 표시하는 위젯이다. 동일한 크기의 표를 그리는 것과 유사한데, 열 수만 지정해주면 해당 수만큼 위젯의 공간을 나누어

while1.tistory.com

참고한 사이트

 

 

GridView
GridView.count(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                crossAxisCount: 2,
                children: <Widget>[
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child: Text('문의', style: TextStyle(color: Colors.black)),
                    ),
                  ),
//나머지 위젯 부분
],
              )

검색바 밑에 있는 위젯을 GridView를 사용하여 구현한 코드이다

crossAxisCount: 2 를 통해 2개의 열이 있음을 알려주고

children: <Widget>[안에 Container를 통해 행을 작성했다 즉 2*2 구도이다.

 

Container안에는 크기 ,여백 , 텍스트 , 배경색 등등을 넣어봤다.

앞서 말했던 거와 마찬가지로 배경색과 테두리 color: Colors.green, borderRadius: BorderRadius.circular(10.0)

를 사용하기 위해서는 decoration: BoxDecoration이 코드를 사용해주면 된다.

 

https://sidongmen.tistory.com/11

 

Flutter Search-bar 구현

게시물을 검색하기 위한 Search-bar를 구현해보았다. 검색하고 싶은 값은 TextField 위젯을 사용했는데, 보통 컨트롤러로 입력 받은 값을 사용하지만, 나는 실시간으로 입력되는 글을 바로 바로 서버

sidongmen.tistory.com

참고한 사이트

 

 

 

 

 

이렇게 간단하게 구현해보았다.

앞으로 검색이 되는 기능과 위젯을 누를 때 해당 창으로 이동되도록 코드를 구현해볼 예정이다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('고객센터 만들기'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  '밴러지',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(
                    hintText: '검색',
                    icon: Icon(Icons.search),
                  ),
                ),
              ),
              GridView.count(
                physics: NeverScrollableScrollPhysics(), 
                shrinkWrap: true,
                crossAxisCount: 2,
                children: <Widget>[
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child: Text('문의', style: TextStyle(color: Colors.black)),
                    ),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child:
                          Text('제품 추가', style: TextStyle(color: Colors.black)),
                    ),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child:
                          Text('자유게시판', style: TextStyle(color: Colors.black)),
                    ),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    margin: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Center(
                      child: Text('기타', style: TextStyle(color: Colors.black)),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

전체 코드

'flutter(dart)' 카테고리의 다른 글

flutter(6) - "확인되었습니다." 다이얼 로그(AlertDialog) 구현하기  (0) 2023.11.16
flutter(5) - form ,validator 사용하여 메시지 반환하기  (0) 2023.11.16
flutter(4)- image_picker - 갤러리에서 이미지 가져오기  (0) 2023.11.08
flutter(3)- InputField안에 label과 hintText 2개 이상 사용하기  (0) 2023.11.02
flutter(2)- BottomBar(하단 바) + Navigator(화면 전환) 구현하기  (0) 2023.10.30

'flutter(dart)'의 다른글

  • 현재글flutter(1)- 검색바와 GridView

관련글

티스토리툴바