[Flutter/Project](Instagram Clone) 포스트 작성 레이아웃2 가로 스크롤 아이콘

---

pub.dev/packages/flutter_tags

flutter_tags | Flutter Package

---

소스코드 및 pubspec.yaml

// screens/share_post_screen.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';
import 'package:flutter_project_IJ/constants/screen_size.dart';
import 'package:flutter_tags/flutter_tags.dart';

class SharePostScreen extends StatelessWidget {
  final File imageFile;
  final String postKey;

  SharePostScreen(this.imageFile, {Key key, @required this.postKey})
      : super(key: key);

  List<String> _tagItems = [
    "approval",
    "pigeon",
    "brown",
    "expenditure",
    "compromise",
    "citizen",
    "inspire",
    "relieve",
    "grave",
    "incredible",
    "voucher",
    "girl",
    "relax",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Post'),
        actions: [
          TextButton(
            onPressed: () {},
            child: Text(
              'Share',
              textScaleFactor: 1.4,
              style: TextStyle(color: Colors.blue),
            ),
          )
        ],
      ),
      body: ListView(
        children: [
          _captionWithImage(),
          _divider,
          _sectionButton('Tag People'),
          _divider,
          _sectionButton('Add Location'),
          _divider,
          Tags(
            horizontalScroll: true,
            itemCount: _tagItems.length,
            heightHorizontalScroll: 30 /* 높이 */,
            itemBuilder: (index) => ItemTags(
              index: index,
              title: _tagItems[index],
              activeColor: Colors.grey[200],
              textActiveColor: Colors.black87,
              borderRadius: BorderRadius.circular(4) /* 테두리 둥글기 */,
              elevation: 2 /* 그림자 */,
              splashColor: Colors.grey[800] /* 선택효과 색상 */,
              color: Colors.red/* 선택 색상 */,
            ),
          ),
        ],
      ),
    );
  }

  Divider get _divider => Divider(
        color: Colors.grey[300],
        height: 1,
        thickness: 1,
      );

  ListTile _sectionButton(String title) {
    return ListTile(
      title: Text(
        title,
        style: TextStyle(fontWeight: FontWeight.w400),
      ),
      trailing: Icon(Icons.navigate_next),
      dense: true,
      /* 작게 만듦. */
      contentPadding: EdgeInsets.symmetric(horizontal: common_gap),
    );
  }

  ListTile _captionWithImage() {
    return ListTile(
      contentPadding: EdgeInsets.symmetric(
        vertical: common_gap,
        horizontal: common_gap,
      ),
      leading: Image.file(
        imageFile,
        width: size.width / 6,
        height: size.width / 6,
        fit: BoxFit.cover,
      ),
      title: TextField(
        decoration: InputDecoration(
          hintText: 'Wirte a caption...',
          border: InputBorder.none,
        ),
      ),
    );
  }
}