[Flutter/Project](Instagram Clone) follow 화면 레이아웃

---

아이폰 시뮬레이터의 속도가 느려서 안드로이드 에뮬레이터로 대체.

---

소스코드 및 pubspec.yaml

// screens/search_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/widgets/rounded_avatar.dart';

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

class _SearchScreenState extends State<SearchScreen> {
  // 30개의 아이템마다 false를 리턴
  List<bool> followings = List.generate(30, (index) => false);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ListView.separated(
          // 30개의 아이템
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(
              onTap: () {
                setState(() {
                  // 클릭마다 followings의 반대 값을 넣음(true or false)
                  followings[index] = !followings[index];
                });
              },
              leading: RoundedAvatar(),
              title: Text('username $index'),
              subtitle: Text('user vio number $index'),
              trailing: Container(
                height: 30,
                width: 80,
                // Container 중앙정렬
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  // 배경색
                  color: followings[index] ? Colors.red[50] : Colors.blue[50],
                  // 테두리 모양
                  border: Border.all(
                      color: followings[index] ? Colors.red : 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,
            );
          }),
    );
  }
}