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

标签 flutter dart

我想创建 Facebook 创建帖子屏幕。

用户界面图像:

enter image description here

我的代码:

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

如果您需要更多信息,请随时发表评论。

如何创建 Facebook 创建帖子屏幕?我将不胜感激任何帮助。预先感谢您!

最佳答案

尝试下面的代码,我尝试与您的设计相同希望它对您有帮助

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),
        ),
      ),
    ],
  ),

结果-> image

关于flutter - 如何在 Flutter 中创建 Facebook 创建帖子屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74897643/

相关文章:

flutter - 如何在 flutter 中输入新信息后创建动态页面(新页面)

android - 断言宽度 > 0.0' : is not true when placing single Image in Container in FittedBox 失败

Dart 库布局

html - 无效字符错误 : "fred"

flutter - Flutter的sqflite查询

dart - 如何在 flutter 集成测试中模拟 http 请求?

flutter - 为什么我的函数不接受Colors类型的参数名称?

dart - 如何修复 Flutter 对象列表中的 RangeError?

flutter - 如何在flutter中的某个时间执行一个方法?

flutter - 按下后退按钮时如何在后台发送应用程序