如何在Flutter中创建Facebook创建帖子屏幕?

hgc7kmma  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(150)

我想创建Facebook创建后屏幕。
用户界面图像:

我的代码:

Column(
  children: [
    Row(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(userAvatarUrl),
        ),
        Expanded(
          child: Column(
            children: [
              Text(userName),
              Row(
                children: [
                  MaterialButton(
                    …
                  ),
                  MaterialButton(
                    …
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
    TextFormField(
      …
    ),
  ],
),

如果您需要更多信息,请随时发表评论。
如何创建Facebook的创建后屏幕?我将不胜感激的任何帮助。谢谢你提前!

z4bn682m

z4bn682m1#

尝试下面的代码我已经尝试相同的为您的设计希望它的帮助你

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Icon(Icons.arrow_back),
          const SizedBox(
            width: 20,
          ),
          Text('Create Post'),
          Spacer(),
          ElevatedButton(
            style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
            onPressed: () {},
            child: Text('Post'),
          )
        ],
      ),
      Divider(
        thickness: 1,
      ),
      const SizedBox(
        height: 20,
      ),
      ListTile(
        contentPadding: EdgeInsets.zero,
        leading: Image.network(
            'https://upload.wikimedia.org/wikipedia/commons/4/44/Facebook_Logo.png'),
        title: Text("Username Here"),
        subtitle: Padding(
          padding: EdgeInsets.only(top: 10),
          child: Row(
            children: [
              Expanded(
                child: OutlinedButton.icon(
                  style: OutlinedButton.styleFrom(
                      foregroundColor: Colors.grey),
                  onPressed: () {},
                  icon: Icon(Icons.group),
                  label: Row(
                    children: [
                      Text('Friends'),
                      Expanded(
                        child: Icon(
                          Icons.arrow_drop_down,
                        ),
                      )
                    ],
                  ),
                ),
              ),
              const SizedBox(
                width: 20,
              ),
              Expanded(
                child: OutlinedButton.icon(
                  style: OutlinedButton.styleFrom(
                      foregroundColor: Colors.grey),
                  onPressed: () {},
                  icon: Icon(Icons.add),
                  label: Row(
                    children: [
                      Text('Album'),
                      Expanded(
                        child: Icon(
                          Icons.arrow_drop_down,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      const SizedBox(
        height: 20,
      ),
      TextFormField(
        maxLines: 5,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'What\'s on your Mind?',
          hintStyle: TextStyle(fontSize: 20),
        ),
      ),
    ],
  ),

结果-〉

相关问题