In-consistent divider color

Question

I'm facing a problem where the divider color's is not as it is supposed to be. So I have 2 dividers. Both of them are Colors.white:

const white = Colors.white;
const transparent = Colors.transparent;

Image of what is happening:

As you can see, there are 2 dividers but the colors are pretty inconsistent. I have no idea on why this is happening as the code is pretty much the same. Initially I thought it was the background, but after commenting it out I saw that with just a plane page, the color is still different. Does anyone have any ideas on why this is happening ?

Here is my code:

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: blue,
     body: 
     SingleChildScrollView(
       child: Center(
         child:Stack(
           children: <Widget>[
            Align(
             // omitted code
            ), 
            Align(
            // omitted code
            ),
            Align(
              alignment:Alignment.center,
              child:  Container(       
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width/1.2,
                child:   Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Expanded(flex:2,child: SizedBox(),),
                    StreamBuilder<QuerySnapshot>(
                    // omitted code
                    ),
                    Expanded(child: SizedBox(),),
                    Expanded(
                      flex: 15,
                      child:Container(
                        child:StreamBuilder<DocumentSnapshot>(
                          stream: Firestore.instance
                            .collection("Users")
                            .document(widget.userEmail)
                            .collection("Flight Data")
                            .document("Courses")
                            .collection(widget.courseAbbr)
                            .document(_dateSelected).snapshots(),
                          builder: (context, snapshot){
                            if (snapshot.hasError) {
                              return new Text('${snapshot.error}');
                            } else if (!snapshot.hasData) {
                              return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
                            } else {  
                              switch (snapshot.connectionState) {
                                case ConnectionState.waiting:
                                  return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),)); 
                                default:
                                  var doc = snapshot.data;
                                  return Column(
                                    children: <Widget>[
                                      Expanded(
                                        flex: 7,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),
                                          child: ListView.builder(
                                            scrollDirection: Axis.vertical,
                                            shrinkWrap: true,
                                            itemCount: _dateSelected == null ? 1 : doc["patterns"].length + 1,
                                            itemBuilder: (BuildContext context, int index) {
                                              if (index == 0 ) {
                                                return Column(
                                                  children: <Widget>[
                                                    AutoSizeText(NA_FLIGHT_PAGE_PATTERN, style: TextStyle(color: white),minFontSize: 16.0,), 
                                                    Divider(color: transparent,),
                                                    Divider(color: white,) // 1st DIVIDER
                                                  ],
                                                ); 
                                              }
                                              index -= 1;
                                              var patterns = doc["patterns"];
                                              return buildPatternTile(patterns[index]);                
                                            }
                                          ),
                                        ),
                                      ),
                                      Expanded(flex: 1,child: SizedBox(),),
                                      Expanded(
                                        flex: 4,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),
                                            child: Column(
                                              children: <Widget>[
                                                Divider(color: transparent,),
                                                Divider(color: transparent,),
                                                AutoSizeText(
                                                  _dateSelected == null ? NA_FLIGHT_PAGE_REMARKS2 : doc["instructor"] + NA_FLIGHT_PAGE_REMARKS, 
                                                  style: TextStyle(color: white),minFontSize: 16.0,),
                                                Divider(color: transparent,), 
                                                Divider(color: white,), // 2nd DIVIDER
                                                Divider(color: transparent,),
                                                AutoSizeText(
                                                  _dateSelected == null ? "" : doc["remarks"], 
                                                  style: TextStyle(color: white),minFontSize: 16.0,), 
                                              ],
                                            ),                                          
                                        ),
                                      ),
                                      Expanded(flex: 1,child: SizedBox(),),
                                      Expanded(
                                        flex: 2,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),                                          
                                        ),
                                      ),                                      
                                    ],
                                  );
                              }                 
                            } 
                          },
                        ),
                      ),
                    ),
                    Expanded(child: SizedBox(),),                             
                  ],
                ),
              ),
            ),
           ],
         )
        )
     )
   );
 }

Answer 1

you can also use Divider

new Divider(
    height: 20.0,
    color: Colors.white,
  ),

Answer 2

I can provide you an alternate solution for this. This will surely do your job, and you will not find any inconsistency in your divider color. Let me know how you think of that.

Idea:

Container() would be there

• Height would be specified
• Decorationbox would used, in which bottomborder is used, color would be given
• In child you pass the child, under which you want the border

Givin you the working example, you implement it accordingly to your widgets:

Container(
  height: 44.0,
  //this does the work for divider
  decoration: BoxDecoration(
    border: Border(bottom: BorderSide(color: Colors.white, width: 1.0))
  ),
  child: Your_Child_Widget_Here
)

Thanks. Happy coding!