leaning community searchの画面作成

yuuya-1205 commented 1 year ago

やったこと

learning_community_search画面の作成

ハッシュタグボタン部分の修正（ken-tyさんのコードまるパクリした笑）
コンフリクト対応
ボタンの文字の色がTheme.of(context).primaryColorだったのでColors.greyに変更した
ハッシュタグボタンUIを綺麗にした。

キャプチャ

Figma | 実装 learning community search |

ken-ty commented 1 year ago

ハッシュタグボタンをたくさん作ったが、コードが長くなるので別の方法があれば教えていただきたいです！

いい感じですね！うしさんの実装を土台に、以下のようにしてみました！ボタンデータと widget 定義を切り離せてコードが長くならず、各ボタンのタップ状態も保持できます。

class SearchItem {
  final String label;
  SearchItem({required this.label});

  bool isSelected = false;
}

class _LeaningCommunitySearchState extends State<LeaningCommunitySearch> {
  List<SearchItem> searchItems = [
    SearchItem(label: '作曲'),
    SearchItem(label: '路上パフォーマンス'),
    SearchItem(label: 'ピアノ'),
    SearchItem(label: 'DTM'),
    SearchItem(label: '弾いてみた動画'),
    SearchItem(label: 'ギター'),
    SearchItem(label: 'バイオリン'),
    SearchItem(label: 'クラシック'),
    SearchItem(label: '機材'),
    SearchItem(label: 'アニソン'),
    SearchItem(label: 'レコーディング'),
    SearchItem(label: '音大受験'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(...
      Column( children: [...,
        TextFormField(...),
        SizedBox(...),
        /* ここから */
                        SizedBox(
                  height: 120,
                  width: double.infinity,
                  child: Wrap(
                    alignment: WrapAlignment.spaceAround,
                    children: searchItems.map((item) {
                      return ElevatedButton(
                        onPressed: () => setState(() {
                          item.isSelected = !item.isSelected;
                        }),
                        style: ElevatedButton.styleFrom(
                          // ボタンの背景色を設定
                          backgroundColor: item.isSelected
                              ? Theme.of(context).primaryColor
                              : Colors.white,
                          // ボタンの文字色を設定
                          foregroundColor: item.isSelected
                              ? Colors.white
                              : Theme.of(context).primaryColor,
                        ),
                        child: Text(
                          item.label,
                          style: const TextStyle(
                            fontSize: 11,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      );
                    }).toList(),
                  ),
                ),
          /* ここまで */
         SizedBox(...),
         Center(...),
     ...

ken-ty commented 1 year ago

(Draft 初めて知りました、僕も使ってみようかな)

yuuya-1205 commented 1 year ago

@ken-ty ありがとうございます！そんな方法があるんですね！！これでやってみます！

yuuya-1205 commented 1 year ago

(Draft 初めて知りました、僕も使ってみようかな)

これ楽でいいっすよ！

yuuya-1205 commented 1 year ago

これ、Enumでも書けそうだなって思いました！一度これでPR出します！

yuuya-1205 commented 1 year ago

ken-ty commented 1 year ago

description のここ, めっちゃ見やすいですね笑良いですね！

ボタンの感じがデザインだと左上からたすき掛けにグラデーションしてますが実装だと左中央から右中央など Figma とちょっとだけ差がありますが, 作り込んでもデザイン変わる可能性あるので現状で十分だと思いました. ボタンはサイズ感など共通 Widget で調整したいなと思いましたー ( 共通化するとしても, この PR じゃなくて良さげ )！Figma 隣に貼ってくれなかったら気づかないくらいの差分笑

Mayumi-Nakabayashi / withTone

leaning community searchの画面作成 #8

やったこと

キャプチャ