코딩하는 제리

[Flutter/Project](Instagram Clone) search screen에 모든 유저 출력 본문

Flutter/Project_InstaClone(완)

[Flutter/Project](Instagram Clone) search screen에 모든 유저 출력

JerryCho 2021. 3. 2. 14:14


models/firebase_auth_state.dart -> 페이스북 로그인 유저 데이터 생성 구문 추가


소스코드 및 pubspec.yaml

// screens/search_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/models/firestore/user_model.dart';
import 'package:flutter_project_IJ/repo/user_network_repository.dart';
import 'package:flutter_project_IJ/widgets/my_progress_indicator.dart';
import 'package:flutter_project_IJ/widgets/rounded_avatar.dart';
import 'package:local_image_provider/local_album.dart';

class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Follow/UnFollow'),
      ),
      body: StreamBuilder<List<UserModel>>(
        stream: userNetworkRepository.getAllUsersWithoutMe(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SafeArea(
              child: ListView.separated(
                // 데이터 갯수
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  UserModel userModel = snapshot.data[index];
                  return ListTile(
                    onTap: () {
                      setState(() {
                        // 클릭마다 followings의 반대 값을 넣음(true or false)
                        // followings[index] = !followings[index];
                      });
                    },

                    leading: RoundedAvatar(),
                    title: Text(userModel.username),
                    subtitle: Text('this is user bio of ${userModel.username}'),
                    trailing: Container(
                      height: 30,
                      width: 80,
                      // Container 중앙정렬
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        // 배경색
                        color: Colors.blue[50],
                        // 테두리 모양
                        border: Border.all(color: Colors.blue, width: 0.5),
                        // 모서리 둥글기
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Text(
                        'following',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, builder) {
                  return Divider(
                    // 구분선
                    color: Colors.grey,
                  );
                },

              ),
            );
          } else {
            return MyProgressIndicator();
          }
        },
      ),
    );
  }
}
Comments