我试着让我的按钮看起来像这样:
目前,它看起来像这样(我只是专注于实现一个图标和文本按钮,它们正确地并排在一起,然后我可以复制和粘贴其他按钮):
我试图中心对齐的个人资料和图标按钮,我用TextButton和IconButton做这些,但我还没有能够。我也试过把它们 Package 在一个中心部件中,但没有成功。我假设我组织我的代码和小部件错误,这是我的代码:
Container( // container holding the main setting buttons
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 0, left: 30, right: 30),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2.5),
borderRadius: BorderRadius.circular(25)
),
padding: const EdgeInsets.only(left: 7, top: 7, right: 10, bottom: 8),
child: Column(
children: [
Container(
alignment: Alignment.center,
child: Material(
color: Colors.transparent,
child: Row(
children: [
IconButton( // TODO: CHANGE ICON TO EXACT FROM FIGMA
iconSize: 20,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
icon: const Icon(Icons.add_circle_outline),
onPressed: () {
// TODO: NO FUNCTIONALITY FOR BUTTON
},
),
TextButton(
style: TextButton.styleFrom(
foregroundColor: Colors.black, // color of text
textStyle: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
),
onPressed: () {
},
child: const Text("Privacy"), // TODO: CHANGE FONT
),
],
),
),
),
ElevatedButton(onPressed: () => {}, child: const Text("Terms of Service")),
ElevatedButton(onPressed: () => {}, child: const Text("Community Rules")),
ElevatedButton(onPressed: () => {}, child: const Text("Report a problem")),
ElevatedButton(onPressed: () => {}, child: const Text("Become a Pioneer")),
ElevatedButton(onPressed: () => {}, child: const Text("Log out")),
ElevatedButton(onPressed: () => {}, child: const Text("Manage account"))
]
),
),
),
),
1条答案
按热度按时间zbdgwd5y1#
您可以用ListTile替换ElevatedButtons
然后加上
如果将ListTiles Package 在SizedBox上,则可以根据需要设置宽度。
但如果你只想让这些小部件居中:
那么列应该有
mainAxisAlignment:MainAxisAlignment.center
第一个按钮所在的行应该有:
mainAxisAlignment:MainAxisAlignment.center