Create content page - Githubissues

y129may9th commented 1 year ago

FIgma

やったこと

AppBar
記事カードのカルーセル部分
learning community home へのカードリスト部分
PageView() -> ListView() の修正
ディレクトリの修正とコメントアウト

やっていないこと

次の PR でやります
- 記事のタブ切り替え
- 「今から質問する」のフローティングボタン
issue 化
- AppBar のプロフアイコン調整 #47
- 記事カード -> 記事詳細への遷移
- 検索機能は α 版には含まないためスキップ #45

みてほしいです

PageView の viewportFraction プロパティでカードが画面に占める割合を指定しています。記事カードの width を指定できず、こちらの割合で調整してます。他の方法があれば教えてください🙏🏻 cf.
- PageView class - widgets library - Dart API
- FlutterのListViewの中にPageViewで画像のカルーセルを作る(縦横入れ子のNested Listの作り方) | ZUMA Lab

キャプチャ

メモ

surfaceTintColor について flutter - White color not display proper using material3 in Card widgets - Stack Overflow

sodateya commented 1 year ago

PageViewではなくListViewを横にスライドしていくのはどうでしょうか？

 SizedBox(
            height: 195,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: articleList
                  .map(
                    (item) => ArticleCard(
                      imagePath: item['imagePath'],
                      title: item['title'],
                      timestamp: item['timestamp'],
                      width: MediaQuery.of(context).size.width * 0.4,
                    ),
                  )
                  .toList(),
            ),
          ),

class ArticleCard extends StatelessWidget {
  const ArticleCard(
      {super.key,
      required this.imagePath,
      required this.title,
      required this.timestamp,
      this.onPressed, // TODO: 遷移の実装はまだです
      required this.width});

  final String imagePath;
  final String title;
  final String timestamp;
  final VoidCallback? onPressed;
  final double width;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0.1,
      child: SizedBox(
        width: width,
        child: Padding(
          padding: const EdgeInsets.only(
              right: 9.5, left: 9.5, top: 9.6, bottom: 7.7),

こんな感じにしして、ArticleCardに幅を指定して見るのはどうでしょう？  ただこの方法だとPageViewみたいにコンテンツを見やすいように止めてくれないのでちょっと検討かもしれません...  実現したいニュアンスと違いましたら申し訳ありません！

ken-ty commented 1 year ago

放置しちゃっていてごめんなさい！ 🙏 今から見ますね！

y129may9th commented 1 year ago

https://github.com/Mayumi-Nakabayashi/withTone/pull/40#issuecomment-1714046723 @ken-ty いえいえー！ありがとうございます！ちょうどいま ListView の修正試しているとこでしたので、明日とかでも大丈夫ですので〜🙏🏻 また修正後のレビュー依頼を Slack で投げます！

ken-ty commented 1 year ago

全然後で対応すれば良いんですが、タグが多いと突き抜けてレンダリングエラーが発生しますね。スクリーンショット 2023-09-12 8 18 25