I can't build text under CarouselSlider

Question

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:)

I think you can simplify the code-snippet, Also if you like to have outline border, you can use containers'decoration — Md. Yeasin Sheikh, Jul 03 '22 at 16:42

score 0 · Answer 1 · answered Jul 04 '22 at 02:26

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,
          ),
        ),
      ),
    );
  }
}

Why it's not like you did? (https://www.img.in.th/images/ff55263ac6c000389b895bd418b5efab.png) — KanG49, Jul 04 '22 at 04:08

KanG49 · Accepted Answer · 2022-07-12T12:55:38.333

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

And you can build the line by this code

 const Divider(
              height: 40,
              thickness: 2,
              indent: 20,
              endIndent: 20,
              color: Colors.grey,
 ),

I can't build text under CarouselSlider

2 Answers2