I want to build text in this shape.
I tried write build text command, But it's not working like death code.
This is my code in this screen.
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class HomeScreen extends StatelessWidget {
final List<String> imageList = [
//image data
'https://www.matichon.co.th/wp-content/uploads/2019/07/บิ๊กป้อมพักสายตาประชุมสภา.jpg',
'https://i.pinimg.com/474x/d8/ac/3a/d8ac3ad182334ba859ceb9f70f3a64fd.jpg',
'https://i.pinimg.com/474x/e5/4c/06/e54c060156c18cc776b4e15da2d6d035.jpg',
];
@override
Widget build(BuildContext context) {
//ใช้ context
return MaterialApp(
//ใช้ MaterialApp
home: Scaffold(
//ใช้ Scaffold
appBar: AppBar(
//สร้าง Appbar
backgroundColor:
const Color.fromARGB(255, 96, 148, 44), //สีของ appbar
title: Row(
mainAxisAlignment:
MainAxisAlignment.center, //กำหนดตำแหน่งของ logo ใน AppBar
children: [
Image.network(
//เรียกใช้ Image.network เพื่อดึงรูปจากอินเทอร์เน็ต
'http://www.srv.ac.th/home/wp-content/uploads/2020/08/sara-logo.png', //กำหนดค่าของ url ของ image ที่ต้องการใน AppBar
fit: BoxFit.contain,
//คล้ายๆกับการ crop รูป ในที่นี้เราให่มันฟิตตามอัตราส่วนของ image
height: 55, //กำหนดขนาดของ image ใน AppBar
errorBuilder: (context, error, stackTrace) => const Icon(Icons
.hide_image_outlined), //กำหนดค่าของ Icon for error ที่จะแสดงกรณีที่ไม่สามารถดึงรูปได้
),
Container(
padding: const EdgeInsets.only(left: 60),
) //ใช้ Container เพื่อควบคุมการสร้างของ image ใน AppBar
],
),
leading: (IconButton(
//leading ใข้แล้ว icon ไปอยู่ด้านซ้าย ไมรู้เหมือนกันว่าทำไมลืม
icon: const Icon(Icons.menu_outlined),
onPressed: () {}, //กำหนดการทำงานของปุ่มนี้
)),
),
body: Container(
//ใช้ Container เพื่อควบคุมการสร้างของหน้าต่างของระบบ และใช้ Padding ได้
padding: const EdgeInsets.only(top: 30), //ขยับขึ้นบน
child: CarouselSlider(
//สร้าง CarouselSlider เพื่อทำงานกับรูปภาพในหน้า HomeScreen
options: CarouselOptions(
//กำหนดค่าของ CarouselSlider
enlargeCenterPage:
true, //ทำให้ภาพที่อยู่ข้างๆสไลด์เล็กกว่าภาพที่แสดงตรงกลาง
enableInfiniteScroll:
true, //กำหนดให้สามารถวนกลับมาได้เรื่อยๆเมื่อสุดภาพสุดท้าย
autoPlay: true, //เลื่อนอัตโนมัติ
),
items:
imageList //กำหนดค่าของรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider
.map(((e) => ClipRRect(
borderRadius: BorderRadius.circular(
10), //กำหนดความโค้งของมุมของรูปภาพ
child: Stack(
//สร้าง Stack เพื่อทำงานกับรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider
fit: StackFit
.expand, //กำหนดว่ารูปภาพที่จะแสดงผลให้มีขนาดเท่ากับรูปภาพที่อยู่ภายใน Stack
children: <Widget>[
//กำหนดค่าของรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider ดังต่อไปนี้
Image.network(
//ดึงรูปภาพจากเว็บไซต์
e, //กำหนดค่าของรูปภาพที่จะแสดงผลจาก imageList.map()
width: 1050, //กำหนดความกว้างของรูปภาพ
height: 350, //กำหนดความสูงของรูปภาพ
fit: BoxFit
.cover, //กำหนดว่ารูปภาพที่จะแสดงผลจะมีขนาดเท่ากับรูปภาพที่อยู่ภายใน Stack
errorBuilder: (context, error, stackTrace) =>
const Icon(Icons
.hide_image_outlined), //กำหนด error icon ของรูปภาพที่จะแสดงผลเมื่อไม่สามารถดึงรูปภาพจากเว็บไซต์ได้
)
],
))))
.toList(),
),
),
),
);
}
Widget buildText(BuildContext context) { //This is my build text code is I tried to made but it's not working
return const Scaffold(
body: Center(
child: Text(
'ข่าวประชาสัมพันธ์',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
It's will be good if you tell me to made a line under CarouselSlider between text. Thank you:)
CodePudding user response：
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main(){
runApp(HomeScreen());
}
class HomeScreen extends StatelessWidget {
final List<String> imageList = [
//image data
'https://www.matichon.co.th/wp-content/uploads/2019/07/บิ๊กป้อมพักสายตาประชุมสภา.jpg',
'https://i.pinimg.com/474x/d8/ac/3a/d8ac3ad182334ba859ceb9f70f3a64fd.jpg',
'https://i.pinimg.com/474x/e5/4c/06/e54c060156c18cc776b4e15da2d6d035.jpg',
];
@override
Widget build(BuildContext context) {
//ใช้ context
return MaterialApp(
//ใช้ MaterialApp
home: Scaffold(
//ใช้ Scaffold
appBar: AppBar(
//สร้าง Appbar
backgroundColor:
const Color.fromARGB(255, 96, 148, 44), //สีของ appbar
title: Row(
mainAxisAlignment:
MainAxisAlignment.center, //กำหนดตำแหน่งของ logo ใน AppBar
children: [
Image.network(
//เรียกใช้ Image.network เพื่อดึงรูปจากอินเทอร์เน็ต
'http://www.srv.ac.th/home/wp-content/uploads/2020/08/sara-logo.png', //กำหนดค่าของ url ของ image ที่ต้องการใน AppBar
fit: BoxFit.contain,
//คล้ายๆกับการ crop รูป ในที่นี้เราให่มันฟิตตามอัตราส่วนของ image
height: 55, //กำหนดขนาดของ image ใน AppBar
errorBuilder: (context, error, stackTrace) => const Icon(Icons
.hide_image_outlined), //กำหนดค่าของ Icon for error ที่จะแสดงกรณีที่ไม่สามารถดึงรูปได้
),
Container(
padding: const EdgeInsets.only(left: 60),
) //ใช้ Container เพื่อควบคุมการสร้างของ image ใน AppBar
],
),
leading: (IconButton(
//leading ใข้แล้ว icon ไปอยู่ด้านซ้าย ไมรู้เหมือนกันว่าทำไมลืม
icon: const Icon(Icons.menu_outlined),
onPressed: () {}, //กำหนดการทำงานของปุ่มนี้
)),
),
body: Container(
//ใช้ Container เพื่อควบคุมการสร้างของหน้าต่างของระบบ และใช้ Padding ได้
padding: const EdgeInsets.only(top: 30), //ขยับขึ้นบน
child: CarouselSlider(
//สร้าง CarouselSlider เพื่อทำงานกับรูปภาพในหน้า HomeScreen
options: CarouselOptions(
//กำหนดค่าของ CarouselSlider
enlargeCenterPage:
true, //ทำให้ภาพที่อยู่ข้างๆสไลด์เล็กกว่าภาพที่แสดงตรงกลาง
enableInfiniteScroll:
true, //กำหนดให้สามารถวนกลับมาได้เรื่อยๆเมื่อสุดภาพสุดท้าย
autoPlay: true, //เลื่อนอัตโนมัติ
),
items:
imageList //กำหนดค่าของรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider
.map(((e) => ClipRRect(
borderRadius: BorderRadius.circular(
10), //กำหนดความโค้งของมุมของรูปภาพ
child: Stack(
//สร้าง Stack เพื่อทำงานกับรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider
fit: StackFit
.expand, //กำหนดว่ารูปภาพที่จะแสดงผลให้มีขนาดเท่ากับรูปภาพที่อยู่ภายใน Stack
children: <Widget>[
//กำหนดค่าของรูปภาพที่จะแสดงผลในส่วนของ CarouselSlider ดังต่อไปนี้
Column(
children: [
Image.network(
//ดึงรูปภาพจากเว็บไซต์
e, //กำหนดค่าของรูปภาพที่จะแสดงผลจาก imageList.map()
width: 1050, //กำหนดความกว้างของรูปภาพ
height: 350, //กำหนดความสูงของรูปภาพ
fit: BoxFit
.cover, //กำหนดว่ารูปภาพที่จะแสดงผลจะมีขนาดเท่ากับรูปภาพที่อยู่ภายใน Stack
errorBuilder: (context, error, stackTrace) =>
const Icon(Icons
.hide_image_outlined), //กำหนด error icon ของรูปภาพที่จะแสดงผลเมื่อไม่สามารถดึงรูปภาพจากเว็บไซต์ได้
),
Text("here u can write")
],
)
],
))))
.toList(),
),
),
),
);
}
Widget buildText(BuildContext context) { //This is my build text code is I tried to made but it's not working
return const Scaffold(
body: Center(
child: Text(
'ข่าวประชาสัมพันธ์',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
CodePudding user response：
Warb CarouselSlider with Column (‘ https://api.flutter.dev/flutter/widgets/Column-class.html’)
The all Column put in Children: […] array
(‘ https://www.youtube.com/watch?v=_liUC641Nmk’)
Don’t warb the Text with Scaffold, but you must to do State Management for VM rebuild a new Text, I use Container for build a Text.
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class HomeScreen extends StatelessWidget {
final List<String> imageList = [
//image data
'https://www.matichon.co.th/wp-content/uploads/2019/07/บิ๊กป้อมพักสายตาประชุมสภา.jpg',
'https://i.pinimg.com/474x/d8/ac/3a/d8ac3ad182334ba859ceb9f70f3a64fd.jpg',
'https://i.pinimg.com/474x/e5/4c/06/e54c060156c18cc776b4e15da2d6d035.jpg',
];
@override
Widget build(BuildContext context) {
//ใช้ context
return MaterialApp( //แสดงผลบนหน้าจอ
//ใช้ MaterialApp
home: Scaffold(
//ใช้ Scaffold
appBar: AppBar( //สร้าง Appbar
backgroundColor:
const Color.fromARGB(255, 96, 148, 44), //สีของ appbar
title: Row(
mainAxisAlignment:
MainAxisAlignment.center, //กำหนดตำแหน่งของ logo ใน AppBar
children: [
Image.network(
//เรียกใช้ Image.network เพื่อดึงรูปจากอินเทอร์เน็ต
'http://www.srv.ac.th/home/wp-content/uploads/2020/08/sara-logo.png', //กำหนดค่าของ url ของ image ที่ต้องการใน AppBar
fit: BoxFit.contain,
//คล้ายๆกับการ crop รูป ในที่นี้เราให่มันฟิตตามอัตราส่วนของ image
height: 55, //กำหนดขนาดของ image ใน AppBar
errorBuilder: (context, error, stackTrace) => const Icon(Icons.hide_image_outlined), //กำหนดค่าของ Icon for error ที่จะแสดงกรณีที่ไม่สามารถดึงรูปได้
),
Container( //ใช้ Container เพื่อควบคุมการสร้างของ image ใน AppBar
padding: const EdgeInsets.only(left: 60), //กำหนดตำแหน่งในกรอบของ image ใน AppBar
)
],
),
leading: (IconButton( //leading ใข้แล้ว icon ไปอยู่ด้านซ้าย ไมรู้เหมือนกันว่าทำไมลืม
icon: const Icon(Icons.menu_outlined),
onPressed: () {}, //กำหนดการทำงานของปุ่มนี้
)),
),
body: Container( //ใช้ Container เพื่อควบคุมการสร้างของหน้าต่างของระบบ และใช้ Padding ได้
padding: const EdgeInsets.only(top: 30), //ขยับขึ้นบน
child: Column(children: <Widget>[ //สร้าง Column เพื่อจัดวางข้อมูลต่างๆที่จะแสดงผลบนหน้าจอ
CarouselSlider( //ใช้ CarouselSlider เพื่อสร้างรูปภาพที่จะแสดงผลบนหน้าจอ
options: CarouselOptions( //กำหนดค่าของ CarouselSlider
enlargeCenterPage: true, //ทำให้รูปที่ไม่ได้อยู่ตรงกลางเล็กกว่า
enableInfiniteScroll: true, //ทำให้เลื่อนรูปไปได้เรื่อยๆและวนกลับมาภาพแรกเมื่อถึงภาพสุดท้าย
autoPlay: true, //ทำให้เลื่อนอัตโนมัติโดยไม่ต้องเลื่อนเอง
),
items: imageList.map((e) => ClipRRect( //กำหนดค่าของ ClipRRect เพื่อทำให้รูปที่แสดงผลบนหน้าจอมีรูปทรงกลม
borderRadius: BorderRadius.circular(10), //ทำให้ขอบรูปมน
child: Stack( //กำหนดค่าของ Stack เพื่อทำให้รูปที่แสดงผลบนหน้าจอมีรูปทรงกลม
fit: StackFit.expand, //กำหนดค่าของ StackFit เพื่อทำให้รูปที่แสดงผลบนหน้าจอเต็มหน้าจอ
children: <Widget>[ //กำหนดค่าของ children เพื่อทำให้รูปที่แสดงผลบนหน้าจอมีรูปทรงกลม
Image.network( //ดึงภาพจากเว็บไซต์
e, //กำหนดค่าของ e เพื่อดึงภาพจากเว็บไซต์
width: 1050, //กำหนดค่าของ width เพื่อกำหนดความกว้างของรูปที่แสดงผลบนหน้าจอ
height: 350, //กำหนดค่าของ height เพื่อกำหนดความสูงของรูปที่แสดงผลบนหน้าจอ
fit: BoxFit.cover, //กำหนดค่าของ BoxFit เพื่อทำให้รูปที่แสดงผลบนหน้าจอเต็มหน้าจอ
errorBuilder: (context, error, stackTrace) => //กำหนดค่าของ errorBuilder เพื่อทำให้รูปที่แสดงผลบนหน้าจอหากมีการเกิดข้อผิดพลาด
const Icon(Icons.hide_image_outlined), //กำหนดค่าของ Icon เพื่อทำให้รูปที่แสดงผลบนหน้าจอหากมีการเกิดข้อผิดพลาด
),
],
),
))
.toList(),
),
Container( //กำหนดค่าของ Container เพื่อทำให้รูปที่แสดงผลบนหน้าจอมีรูปทรงกลม
padding: const EdgeInsets.only(top: 50, right: 250), //กำหนดตำแหน่ง Text
child: const Text('ข่าวประชาสัมพันธ์', //กำหนด Text
style: TextStyle( //กำหนดค่าของ Text
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
]),
),
),
);
}
}