我目前有一個像這樣的頁面，但我想在底部的按鈕部分添加一個svg圖片，就像第二張圖片中那樣。我怎樣才能做到這一點？
Images
你好，我目前有一個像這樣的頁面，但我想在底部的按鈕部分添加一個svg圖片，就像第二張圖片那樣。我怎樣才能做到這一點呢？
uj5u.com熱心網友回復： 演示小工具 uj5u.com熱心網友回復：
標籤：
import 'package:flutter/material.dart'/span>。
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(const MyApp())。
}
class MyApp extends StatelessWidget{
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
標題。'URL Shortener'。
主題。ThemeData(
primarySwatch: Colors.紫色。
),
首頁。StartPage()。
);
}
}
class StartPage extends StatelessWidget{
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.gray[300] 。
body: Center(
孩子。ListView(
children: [
中心()
child: 文本(
"Shortly"。
風格。TextStyle(
字體大小。40,
高度。2.0。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
SvgPicture.asset(
'assets/illustration.svg'。
),
中心(
孩子。Text(
"讓我們開始吧！"。
風格。TextStyle(
字體大小。20。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
中心(
孩子。SizedBox(
width: 200,
高度。60。
孩子。Padding(
padding: const EdgeInsets.all（8.0）。
孩子。文本(
"將你的第一個鏈接粘貼到該欄位中以縮短它"。
textAlign: TextAlign.center,
style: 文本風格(
字體大小。15。
color: Color.fromRGBO(76, 74, 85, 10) 。
fontWeight: FontWeight.bold))。
),
),
),
中心(
孩子。SizedBox(
width: 300,
高度。40。
孩子。TextField(
textAlign: TextAlign.center,
裝飾。InputDecoration(
contentPadding: EdgeInsets.all(10.0)。
邊界。OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.round(10.0)。
),
borderSide: borderSide(
width: 0,
風格。borderStyle.none,
),
),
fillColor: Colors.white,
填充。true。
hintText: 'Shorten a link here ...')。
),
),
),
中心(
孩子。SizedBox(
width: 300,
孩子。ElevatedButton(
onPressed: () {
print("Button Click"/span>)。
},
風格。ElevatedButton.styleFrom(
primary: Colors.blue,
形狀。RoundedRectangleBorder(
borderRadius: borderRadius.round(10.0))。
最小尺寸。Size(60, 40) 。
),
孩子。Text('SHORTEN IT!')。
),
),
)
],
),
));
}
}
class StartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.gray[300] 。
體。ListView(
兒童。[
Center(
child: 文本(
"Shortly"。
風格。TextStyle(
字體大小。40,
高度。2.0。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
//SvgPicture.asset()
// 'assets/illustration.svg',/span>
// ）,
容器(
高度。200。
color: Colors.deepPurple.withOpacity(.3)。
孩子。Text("SVG assets here")。
),
中心(
孩子。Text(
"讓我們開始吧！"。
風格。TextStyle(
字體大小。20。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
中心(
孩子。SizedBox(
width: 200,
高度。60。
孩子。Padding(
padding: const EdgeInsets.all（8.0）。
孩子。文本(
"將你的第一個鏈接粘貼到該欄位中以縮短它"。
textAlign: TextAlign.center,
style: 文本風格(
字體大小。15。
color: Color.fromRGBO(76, 74, 85, 10) 。
fontWeight: FontWeight.bold))。
),
),
),
SizedBox(
//bottomackground height
高度。220,
孩子。堆疊(
對齊。Alignment.center,
兒童。[
//background svg asset
容器(
color: Colors.deepOrange.withOpacity(.4) 。
),
列(
mainAxisAlignment: MainAxisAlignment.center,
兒童。[
SizedBox(
width: 300,
高度。40。
孩子。TextField(
textAlign: TextAlign.center,
裝飾。InputDecoration(
contentPadding: EdgeInsets.all(10.0)。
邊界。OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.round(10.0)。
),
borderSide: borderSide(
width: 0,
風格。borderStyle.none,
),
),
fillColor: Colors.white,
填充。true。
hintText: 'Shorten a link here ...')。
),
),
//按鈕之間有一點空間。
SizedBox(
高度。10,
),
SizedBox(
width: 300,
孩子。ElevatedButton(
onPressed: () {
print("Button Click"/span>)。
},
風格。ElevatedButton.styleFrom(
primary: Colors.blue,
形狀。RoundedRectangleBorder(
borderRadius: borderRadius.round(10.0))。
最小尺寸。Size(60, 40) 。
),
孩子。Text('SHORTEN IT!')。
),
),
],
),
],
),
),
],
),
);
}
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.gray[300] 。
body: Center(
孩子。容器(
height:MediaQuery.of(context).size.height。
width:MediaQuery.of(context).size.width,
孩子。堆疊(
兒童。[
SvgPicture.asset(
"assets/a.svg"。
適合。BoxFit.fill。
),
列(
mainAxisAlignment: MainAxisAlignment.spaceBetween ,
兒童。[
中心(
child: 容器(
margin: EdgeInsets.only(top:20.0)。
孩子。文本(
"Shortly",
風格。TextStyle(
字體大小。40,
高度。2.0。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
),
欄目(
兒童。[
中心(
child: 容器(
margin: EdgeInsets.only(top:200.0)。
子母。文本(
"讓我們開始吧！"。
風格。TextStyle(
字體大小。20。
color: Color.fromRGBO(53, 50, 62, 10) 。
fontWeight: FontWeight.bold）。)
),
),
),
中心(
孩子。SizedBox(
width: 200,
高度。60。
孩子。Padding(
padding: const EdgeInsets.all（8.0）。
孩子。文本(
"將你的第一個鏈接粘貼到該欄位中以縮短它"。
textAlign: TextAlign.center,
style: 文本風格(
字體大小。15。
color: Color.fromRGBO(76, 74, 85, 10) 。
fontWeight: FontWeight.bold))。
),
),
),
],
),
容器(
高度。150.0。
color: Colors.purple,
孩子。列(
mainAxisAlignment: MainAxisAlignment.center,
兒童。[
Center(
child: 容器(
width: 300,
高度。40。
孩子。TextField(
textAlign: TextAlign.center,
裝飾。InputDecoration(
contentPadding: EdgeInsets.all(10.0)。
邊界。OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.round(10.0)。
),
borderSide: borderSide(
width: 0,
風格。borderStyle.none,
),
),
fillColor: Colors.white,
填充。true。
hintText: 'Shorten a link here ...')。
),
),
),
中心(
孩子。SizedBox(
width: 300,
孩子。ElevatedButton(
onPressed: () {
print("Button Click"/span>)。
},
風格。ElevatedButton.styleFrom(
primary: Colors.blue,
形狀。RoundedRectangleBorder(
borderRadius: borderRadius.round(10.0))。
最小尺寸。Size(60, 40) 。
),
孩子。Text('SHORTEN IT!')。
),
),
),
],
),
)
],
),
],
),
),
));
}